@nyaruka/temba-components 0.124.3 → 0.125.0

package/out-tsc/src/chart/TembaChart.js

@@ -7,6 +7,8 @@ import { getStore } from '../store/Store';
 // eslint-disable-next-line import/no-named-as-default
 import Chart from 'chart.js/auto';
 import 'chartjs-adapter-luxon';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+Chart.register(ChartDataLabels);
 const DEFAULT_PALETTE = 'qualitative-set1';
 const COLOR_PALETTES = {
     // Qualitative (categorical, no order)
@@ -246,6 +248,18 @@ export function formatDurationFromSeconds(seconds) {
     return units.slice(0, 2).join(' ');
 }
 export class TembaChart extends RapidElement {
+    // head-room for labels when percentages are visible
+    getInflatedMax() {
+        if (!this.showPercent || !this.data)
+            return undefined;
+        // total stacked value for each x-index
+        const totals = Array(this.data.labels.length).fill(0);
+        for (const ds of this.datasets) {
+            ds.data.forEach((v, i) => (totals[i] += v));
+        }
+        const maxStack = Math.max(...totals);
+        return maxStack > 0 ? maxStack * 1.15 : undefined;
+    }
     static get styles() {
         return css `
       .chart-title {
@@ -297,19 +311,21 @@ export class TembaChart extends RapidElement {
         this.other = false;
         this.datasets = [];
         this.maxSplits = 2;
+        this.xType = 'category';
+        this.yType = 'count';
         this.hideOther = false;
         this.splits = [];
         this.dataname = 'Counts';
         this.single = false;
         this.legend = false;
         this.config = false;
-        this.formatDuration = false;
         this.showAll = false;
         this.colorIndex = 0;
         this.showConfig = false;
         this.opacity = 1;
         this.seriesBorderRadius = 2;
         this.seriesBorderWidth = 1;
+        this.showPercent = false;
     }
     firstUpdated(changes) {
         super.firstUpdated(changes);
@@ -341,6 +357,14 @@ export class TembaChart extends RapidElement {
                 this.seriesBorderWidth = Math.max(1, this.seriesBorderWidth);
             }
         }
+        if (changes.has('showPercent') && this.chart) {
+            const yScale = this.chart.options.scales.y;
+            yScale.ticks.display = !this.showPercent;
+            yScale.grid.display = !this.showPercent;
+            yScale.border.display = !this.showPercent;
+            yScale.max = this.showPercent ? this.getInflatedMax() : undefined;
+            this.chart.update();
+        }
     }
     /**
      * Returns a tuple: [backgroundColors[], borderColors[]].
@@ -349,25 +373,25 @@ export class TembaChart extends RapidElement {
      */
     get colors() {
         const baseColors = COLOR_PALETTES[this.palette] || COLOR_PALETTES[DEFAULT_PALETTE];
-        // Clamp transparency between 0 and 1
+        // clamp transparency between 0 and 1
         const alpha = Math.max(0, Math.min(1, this.opacity));
-        // Borders: darken base color, no transparency
+        // borders darken base color, no transparency
         const borderColors = baseColors.map((color) => darkenColor(color, 0.25));
-        // Backgrounds: apply transparency to base color
+        // backgrounds apply transparency to base color
         const backgroundColors = baseColors.map((color) => {
-            // If already rgba, just replace the alpha
+            // if already rgba, just replace the alpha
             if (color.startsWith('rgba')) {
                 return color.replace(/rgba\(([^,]+),([^,]+),([^,]+),([^)]+)\)/, (_m, r, g, b) => {
                     return `rgba(${r},${g},${b},${alpha})`;
                 });
             }
-            // If already rgb, convert to rgba
+            // if already rgb, convert to rgba
             if (color.startsWith('rgb(')) {
                 return color.replace(/rgb\(([^,]+),([^,]+),([^,]+)\)/, (_m, r, g, b) => {
                     return `rgba(${r},${g},${b},${alpha})`;
                 });
             }
-            // If hex, convert to rgba
+            // if hex, convert to rgba
             if (color.startsWith('#')) {
                 let hex = color.replace('#', '');
                 if (hex.length === 3) {
@@ -387,14 +411,10 @@ export class TembaChart extends RapidElement {
         });
         return [backgroundColors, borderColors];
     }
-    /**
-     * Utility to darken an rgba or hex color by a given factor (0-1).
-     */
     calculateSplits() {
         if (this.data) {
             const datasets = [];
             const sums = [];
-            // Get color arrays
             const [backgroundColors, borderColors] = this.colors;
             for (const dataset of this.data.datasets) {
                 if (!this.showAll &&
@@ -450,9 +470,28 @@ export class TembaChart extends RapidElement {
     updateChart() {
         var _a;
         if (((_a = this.datasets) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            const grandTotal = this.datasets.reduce((sum, ds) => sum +
+                ds.data.reduce((dsSum, v) => dsSum + (v !== null && v !== void 0 ? v : 0), 0), 0) || undefined;
+            const percentFormatter = (value) => {
+                const pct = grandTotal ? (value / grandTotal) * 100 : 0;
+                return `${Math.round(pct)}%`;
+            };
             if (this.chart) {
                 this.chart.data.labels = this.data.labels;
                 this.chart.data.datasets = this.datasets;
+                // update y-axis max dynamically
+                if (this.showPercent) {
+                    this.chart.options.scales.y.max = this.getInflatedMax();
+                }
+                const datalabels = this.chart.options.plugins.datalabels || {};
+                datalabels.display = this.showPercent;
+                if (this.showPercent) {
+                    datalabels.formatter = percentFormatter;
+                }
+                else {
+                    delete datalabels.formatter;
+                }
+                this.chart.options.plugins.datalabels = datalabels;
                 this.chart.update();
             }
             else {
@@ -463,55 +502,74 @@ export class TembaChart extends RapidElement {
                         datasets: this.datasets
                     },
                     options: {
+                        maxBarThickness: 80,
                         plugins: {
-                            legend: {
-                                display: this.legend
-                            },
-                            ...(this.formatDuration && {
-                                tooltip: {
-                                    callbacks: {
-                                        label: (context) => {
-                                            const label = context.dataset.label || '';
-                                            const value = context.parsed.y;
-                                            const formattedValue = formatDurationFromSeconds(value);
-                                            return `${label}: ${formattedValue}`;
+                            legend: { display: this.legend },
+                            tooltip: {
+                                callbacks: {
+                                    label: (context) => {
+                                        const label = context.dataset.label || '';
+                                        const value = context.parsed.y;
+                                        if (this.yType === 'duration') {
+                                            return `${label}: ${formatDurationFromSeconds(value)}`;
                                         }
+                                        return `${label}: ${value}`;
                                     }
                                 }
-                            })
+                            },
+                            datalabels: {
+                                display: this.showPercent,
+                                anchor: 'end',
+                                align: 'end',
+                                offset: -3,
+                                clamp: true,
+                                ...(this.showPercent && { formatter: percentFormatter }),
+                                color: '#666',
+                                font: { weight: '600' }
+                            }
                         },
                         responsive: true,
                         maintainAspectRatio: false,
-                        animation: {
-                            x: { from: 500 },
-                            y: { from: 500 }
+                        animations: {
+                            x: {
+                                // no horizontal motion
+                                duration: 0
+                            },
+                            y: {
+                                duration: 200,
+                                easing: 'easeOutCubic'
+                            }
                         },
                         scales: {
                             y: {
                                 min: 0,
+                                ...(this.showPercent && { max: this.getInflatedMax() }),
                                 stacked: true,
-                                ...(this.formatDuration && {
-                                    ticks: {
-                                        callback: (value) => {
-                                            return formatDurationFromSeconds(value);
-                                        }
-                                    }
-                                }),
-                                grid: { color: 'rgba(0,0,0,0.04)' }
+                                grid: {
+                                    color: 'rgba(0,0,0,0.04)',
+                                    display: !this.showPercent, // hide gridlines in percent mode
+                                    drawBorder: !this.showPercent // hides axis line when false
+                                },
+                                border: {
+                                    display: !this.showPercent // Chart.js >= 4
+                                },
+                                ticks: {
+                                    display: !this.showPercent,
+                                    ...(this.yType === 'duration' &&
+                                        !this.showPercent && {
+                                        callback: (value) => formatDurationFromSeconds(value)
+                                    })
+                                }
                             },
                             x: {
-                                type: 'time',
+                                type: this.xType,
+                                grid: { display: false },
+                                stacked: true,
                                 time: {
                                     unit: 'day',
-                                    tooltipFormat: 'DDD', // Luxon for 'Feb 16, 2025'
-                                    displayFormats: {
-                                        day: 'MMM dd'
-                                    }
-                                },
-                                grid: {
-                                    display: false
-                                },
-                                stacked: true
+                                    tooltipFormat: 'DDD',
+                                    displayFormats: { day: 'MMM dd' }
+                                }
                             }
                         }
                     }
@@ -603,6 +661,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'splits' })
 ], TembaChart.prototype, "splitNames", void 0);
+__decorate([
+    property({ type: String })
+], TembaChart.prototype, "xType", void 0);
+__decorate([
+    property({ type: String })
+], TembaChart.prototype, "yType", void 0);
 __decorate([
     property({ type: Boolean })
 ], TembaChart.prototype, "hideOther", void 0);
@@ -621,9 +685,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TembaChart.prototype, "config", void 0);
-__decorate([
-    property({ type: Boolean })
-], TembaChart.prototype, "formatDuration", void 0);
 __decorate([
     property({ type: Boolean })
 ], TembaChart.prototype, "showAll", void 0);
@@ -645,4 +706,7 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], TembaChart.prototype, "seriesBorderWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'percent' })
+], TembaChart.prototype, "showPercent", void 0);
 //# sourceMappingURL=TembaChart.js.map

package/out-tsc/src/chart/TembaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"TembaChart.js","sourceRoot":"","sources":["../../../src/chart/TembaChart.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,sDAAsD;AACtD,OAAO,KAAoB,MAAM,eAAe,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAE/B,MAAM,eAAe,GAAgC,kBAAkB,CAAC;AACxE,MAAM,cAAc,GAAG;IACrB,sCAAsC;IACtC,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,qBAAqB,EAAE;QACrB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,qBAAqB,EAAE;QACrB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,4CAA4C;IAC5C,gBAAgB,EAAE;QAChB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,gBAAgB,EAAE;QAChB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,gBAAgB,EAAE;QAChB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IAED,8CAA8C;IAC9C,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,mBAAmB,EAAE;QACnB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,iBAAiB,EAAE;QACjB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,mBAAmB,EAAE;QACnB,SAAS;QACT,SAAS;QACT,S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","sourcesContent":["import { RapidElement } from '../RapidElement';\nimport { property, state } from 'lit/decorators.js';\nimport { css, html, PropertyValueMap, TemplateResult } from 'lit';\n\nimport { Select, SelectOption } from '../select/Select';\nimport { darkenColor, getClasses } from '../utils';\nimport { getStore } from '../store/Store';\n\n// eslint-disable-next-line import/no-named-as-default\nimport Chart, { ChartType } from 'chart.js/auto';\nimport 'chartjs-adapter-luxon';\n\nconst DEFAULT_PALETTE: keyof typeof COLOR_PALETTES = 'qualitative-set1';\nconst COLOR_PALETTES = {\n  // Qualitative (categorical, no order)\n  'qualitative-set1': [\n    '#5ea3db',\n    '#c186e3',\n    '#66c2a5',\n    '#fc8d62',\n    '#a6d854',\n    '#ffd92f',\n    '#e5c494',\n    '#b3b3b3'\n  ],\n  'qualitative-set2': [\n    '#377eb8',\n    '#984ea3',\n    '#4daf4a',\n    '#ff7f00',\n    '#e41a1c',\n    '#a65628',\n    '#f781bf',\n    '#ffff33'\n  ],\n  'qualitative-set3': [\n    '#1b9e77',\n    '#d95f02',\n    '#7570b3',\n    '#e7298a',\n    '#66a61e',\n    '#e6ab02',\n    '#a6761d'\n  ],\n  'qualitative-paired': [\n    '#1f78b4',\n    '#a6cee3',\n    '#6a3d9a',\n    '#cab2d6',\n    '#33a02c',\n    '#b2df8a',\n    '#e31a1c',\n    '#fb9a99',\n    '#ff7f00',\n    '#fdbf6f'\n  ],\n  'qualitative-accent': [\n    '#7fc97f',\n    '#beaed4',\n    '#fdc086',\n    '#ffff99',\n    '#386cb0',\n    '#f0027f',\n    '#bf5b17',\n    '#666666'\n  ],\n  'qualitative-pastel1': [\n    '#fbb4ae',\n    '#b3cde3',\n    '#ccebc5',\n    '#decbe4',\n    '#fed9a6',\n    '#ffffcc',\n    '#e5d8bd',\n    '#fddaec'\n  ],\n  'qualitative-pastel2': [\n    '#b3e2cd',\n    '#fdcdac',\n    '#cbd5e8',\n    '#f4cae4',\n    '#e6f5c9',\n    '#fff2ae',\n    '#f1e2cc'\n  ],\n  // Diverging (for data with midpoint like 0)\n  'diverging-prgn': [\n    '#40004b',\n    '#762a83',\n    '#9970ab',\n    '#c2a5cf',\n    '#e7d4e8',\n    '#f7f7f7',\n    '#d9f0d3',\n    '#a6dba0',\n    '#5aae61',\n    '#1b7837',\n    '#00441b'\n  ],\n  'diverging-spectral': [\n    '#9e0142',\n    '#d53e4f',\n    '#f46d43',\n    '#fdae61',\n    '#fee08b',\n    '#ffffbf',\n    '#e6f598',\n    '#abdda4',\n    '#66c2a5',\n    '#3288bd',\n    '#5e4fa2'\n  ],\n  'diverging-piyg': [\n    '#8e0152',\n    '#c51b7d',\n    '#de77ae',\n    '#f1b6da',\n    '#fde0ef',\n    '#f7f7f7',\n    '#e6f5d0',\n    '#b8e186',\n    '#7fbc41',\n    '#4d9221',\n    '#276419'\n  ],\n  'diverging-rdylgn': [\n    '#a50026',\n    '#d73027',\n    '#f46d43',\n    '#fdae61',\n    '#fee08b',\n    '#ffffbf',\n    '#d9ef8b',\n    '#a6d96a',\n    '#66bd63',\n    '#1a9850',\n    '#006837'\n  ],\n  'diverging-brbg': [\n    '#543005',\n    '#8c510a',\n    '#bf812d',\n    '#dfc27d',\n    '#f6e8c3',\n    '#f5f5f5',\n    '#c7eae5',\n    '#80cdc1',\n    '#35978f',\n    '#01665e',\n    '#003c30'\n  ],\n\n  // Sequential (for continuous or ordered data)\n  'sequential-blues': [\n    '#f7fbff',\n    '#deebf7',\n    '#c6dbef',\n    '#9ecae1',\n    '#6baed6',\n    '#4292c6',\n    '#2171b5',\n    '#08519c',\n    '#08306b'\n  ],\n  'sequential-greens': [\n    '#f7fcf5',\n    '#e5f5e0',\n    '#c7e9c0',\n    '#a1d99b',\n    '#74c476',\n    '#41ab5d',\n    '#238b45',\n    '#006d2c',\n    '#00441b'\n  ],\n  'sequential-oranges': [\n    '#fff5eb',\n    '#fee6ce',\n    '#fdd0a2',\n    '#fdae6b',\n    '#fd8d3c',\n    '#f16913',\n    '#d94801',\n    '#a63603',\n    '#7f2704'\n  ],\n  'sequential-purples': [\n    '#fcfbfd',\n    '#efedf5',\n    '#dadaeb',\n    '#bcbddc',\n    '#9e9ac8',\n    '#807dba',\n    '#6a51a3',\n    '#54278f',\n    '#3f007d'\n  ],\n  'sequential-reds': [\n    '#fff5f0',\n    '#fee0d2',\n    '#fcbba1',\n    '#fc9272',\n    '#fb6a4a',\n    '#ef3b2c',\n    '#cb181d',\n    '#a50f15',\n    '#67000d'\n  ],\n  'sequential-ylgnbu': [\n    '#ffffd9',\n    '#edf8b1',\n    '#c7e9b4',\n    '#7fcdbb',\n    '#41b6c4',\n    '#1d91c0',\n    '#225ea8',\n    '#253494',\n    '#081d58'\n  ]\n};\n\nconst otherBackgroundColor = 'rgba(212, 212, 212, 0.5)';\n\n/**\n * Formats a duration in seconds to a human-readable string showing the two largest units.\n * Examples: 68787 -> \"19h 6m\", 958000 -> \"11d 2h\", 3661 -> \"1h 1m\"\n */\nexport function formatDurationFromSeconds(seconds: number): string {\n  if (seconds === 0) {\n    return '0s';\n  }\n\n  const totalDays = Math.floor(seconds / 86400);\n  const remainingAfterDays = seconds % 86400;\n  const remainingHours = Math.floor(remainingAfterDays / 3600);\n  const remainingAfterHours = remainingAfterDays % 3600;\n  const remainingMinutes = Math.floor(remainingAfterHours / 60);\n  const remainingSeconds = remainingAfterHours % 60;\n\n  const units = [];\n\n  if (totalDays > 0) {\n    units.push(`${totalDays}d`);\n  }\n  if (remainingHours > 0) {\n    units.push(`${remainingHours}h`);\n  }\n  if (remainingMinutes > 0 && units.length < 2) {\n    units.push(`${remainingMinutes}m`);\n  }\n  if (remainingSeconds > 0 && units.length < 2) {\n    units.push(`${remainingSeconds}s`);\n  }\n\n  // Return the first two most significant units\n  return units.slice(0, 2).join(' ');\n}\n\nexport interface RapidChartData {\n  labels: string[];\n  datasets: { label: string; data: number[] }[];\n}\n\nexport class TembaChart extends RapidElement {\n  @property({ type: String })\n  chartType: ChartType = 'bar';\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  header: string = '';\n\n  @property({ type: Boolean })\n  other: boolean = false;\n\n  @property({ type: Object })\n  data: RapidChartData;\n\n  @state()\n  datasets: { label: string; data: number[] }[] = [];\n\n  @property({ type: Number })\n  maxSplits: number = 2;\n\n  @property({ type: String, attribute: 'splits' })\n  splitNames: string;\n\n  @property({ type: Boolean })\n  hideOther: boolean = false;\n\n  @state()\n  splits: string[] = [];\n\n  @property({ type: String })\n  dataname = 'Counts';\n\n  @property({ type: Boolean })\n  single: boolean = false;\n\n  @property({ type: Boolean })\n  legend: boolean = false;\n\n  @property({ type: Boolean })\n  config: boolean = false;\n\n  @property({ type: Boolean })\n  formatDuration: boolean = false;\n\n  @property({ type: Boolean })\n  showAll: boolean = false;\n\n  @property({ type: Number })\n  colorIndex: number = 0;\n\n  @state()\n  showConfig: boolean = false;\n\n  @property({ type: String })\n  palette: keyof typeof COLOR_PALETTES;\n\n  @property({ type: Number })\n  opacity: number = 1;\n\n  @property({ type: Number })\n  seriesBorderRadius: number = 2;\n\n  @property({ type: Number })\n  seriesBorderWidth: number = 1;\n\n  chart: Chart;\n  shadowRootDiv: HTMLDivElement;\n  canvas: HTMLCanvasElement;\n  ctx: CanvasRenderingContext2D;\n\n  static get styles() {\n    return css`\n      .chart-title {\n        font-size: 1.2em;\n        font-weight: 600;\n        text-align: center;\n      }\n\n      temba-select {\n        display: block;\n      }\n\n      .config-toggle {\n        margin-top: -2.5em;\n        margin-right: -0.5em;\n        color: #bbb;\n        display: none;\n      }\n\n      .config-toggle:hover {\n        color: #666;\n      }\n\n      .config-toggle.show {\n        color: #666;\n        display: block;\n      }\n\n      .config {\n        max-height: 0px;\n        padding: 0em 1em;\n        border-radius: var(--curvature);\n        border: 1px solid transparent;\n        background: transparent;\n        overflow: hidden;\n        transition: all 0.2s ease-in-out;\n      }\n\n      .config.show {\n        padding: 2em 1em 1.5em 1em;\n        max-height: 50px;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    const wrapper = this.shadowRoot.querySelector('#canvas-wrapper');\n    this.canvas = document.createElement('canvas');\n    this.canvas.setAttribute('height', '300px');\n    wrapper.appendChild(this.canvas);\n    this.ctx = this.canvas.getContext('2d');\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (changes.has('splitNames')) {\n      this.splits = this.splitNames.split(',').map((s) => s.trim());\n    }\n\n    if (changes.has('data') || changes.has('splits')) {\n      this.calculateSplits();\n    }\n\n    if (changes.has('datasets')) {\n      this.updateChart();\n    }\n\n    if (changes.has('url')) {\n      const store = getStore();\n      store.getUrl(this.url, { skipCache: true }).then((response) => {\n        this.data = response.json.data;\n      });\n    }\n\n    if (changes.has('chartType')) {\n      if (this.chartType === 'line') {\n        this.seriesBorderWidth = Math.max(1, this.seriesBorderWidth);\n      }\n    }\n  }\n\n  /**\n   * Returns a tuple: [backgroundColors[], borderColors[]].\n   * Border colors are darkened versions of the base palette (before transparency).\n   * Background colors have transparency applied.\n   */\n  get colors(): [string[], string[]] {\n    const baseColors =\n      COLOR_PALETTES[this.palette] || COLOR_PALETTES[DEFAULT_PALETTE];\n    // Clamp transparency between 0 and 1\n    const alpha = Math.max(0, Math.min(1, this.opacity));\n    // Borders: darken base color, no transparency\n    const borderColors = baseColors.map((color) => darkenColor(color, 0.25));\n    // Backgrounds: apply transparency to base color\n    const backgroundColors = baseColors.map((color) => {\n      // If already rgba, just replace the alpha\n      if (color.startsWith('rgba')) {\n        return color.replace(\n          /rgba\\(([^,]+),([^,]+),([^,]+),([^)]+)\\)/,\n          (_m, r, g, b) => {\n            return `rgba(${r},${g},${b},${alpha})`;\n          }\n        );\n      }\n      // If already rgb, convert to rgba\n      if (color.startsWith('rgb(')) {\n        return color.replace(\n          /rgb\\(([^,]+),([^,]+),([^,]+)\\)/,\n          (_m, r, g, b) => {\n            return `rgba(${r},${g},${b},${alpha})`;\n          }\n        );\n      }\n      // If hex, convert to rgba\n      if (color.startsWith('#')) {\n        let hex = color.replace('#', '');\n        if (hex.length === 3) {\n          hex = hex\n            .split('')\n            .map((c) => c + c)\n            .join('');\n        }\n        const num = parseInt(hex, 16);\n        const r = (num >> 16) & 255;\n        const g = (num >> 8) & 255;\n        const b = num & 255;\n        return `rgba(${r},${g},${b},${alpha})`;\n      }\n      // fallback\n      return color;\n    });\n    return [backgroundColors, borderColors];\n  }\n\n  /**\n   * Utility to darken an rgba or hex color by a given factor (0-1).\n   */\n\n  private calculateSplits() {\n    if (this.data) {\n      const datasets = [];\n      const sums = [];\n      // Get color arrays\n      const [backgroundColors, borderColors] = this.colors;\n      for (const dataset of this.data.datasets) {\n        if (\n          !this.showAll &&\n          this.splits.find((s) => s === dataset.label) === undefined\n        ) {\n          for (let i = 0; i < dataset.data.length; i++) {\n            if (sums[i] === undefined) {\n              sums[i] = dataset.data[i];\n            } else {\n              sums[i] += dataset.data[i];\n            }\n          }\n        } else {\n          const colorIdx =\n            (datasets.length + this.colorIndex) % backgroundColors.length;\n          const bgColor = backgroundColors[colorIdx];\n          const borderColor = borderColors[colorIdx];\n          datasets.push({\n            ...dataset,\n            backgroundColor: bgColor,\n            borderColor,\n            borderWidth: this.seriesBorderWidth,\n            borderRadius: this.seriesBorderRadius\n          });\n        }\n      }\n\n      if (datasets.length === 0) {\n        const idx = this.colorIndex % backgroundColors.length;\n        datasets.push({\n          label: this.single ? this.dataname : `All ${this.dataname}`,\n          data: sums,\n          backgroundColor: backgroundColors[idx],\n          borderColor: borderColors[idx],\n          borderWidth: this.seriesBorderWidth,\n          borderRadius: this.seriesBorderRadius\n        });\n      } else {\n        if (!this.hideOther && !this.showAll) {\n          datasets.push({\n            label: 'Other',\n            data: sums,\n            backgroundColor: otherBackgroundColor,\n            borderColor: darkenColor(otherBackgroundColor, 0.05),\n            borderWidth: 1,\n            borderRadius: this.seriesBorderRadius\n          });\n        }\n      }\n      this.datasets = datasets;\n    }\n  }\n\n  public updateChart(): void {\n    if (this.datasets?.length > 0) {\n      if (this.chart) {\n        this.chart.data.labels = this.data.labels;\n        this.chart.data.datasets = this.datasets;\n        this.chart.update();\n      } else {\n        const chartData = {\n          type: this.chartType,\n          data: {\n            labels: this.data.labels,\n            datasets: this.datasets\n          },\n          options: {\n            plugins: {\n              legend: {\n                display: this.legend\n              },\n              ...(this.formatDuration && {\n                tooltip: {\n                  callbacks: {\n                    label: (context: any) => {\n                      const label = context.dataset.label || '';\n                      const value = context.parsed.y;\n                      const formattedValue = formatDurationFromSeconds(value);\n                      return `${label}: ${formattedValue}`;\n                    }\n                  }\n                }\n              })\n            },\n            responsive: true,\n            maintainAspectRatio: false,\n            animation: {\n              x: { from: 500 },\n              y: { from: 500 }\n            },\n            scales: {\n              y: {\n                min: 0,\n                stacked: true,\n                ...(this.formatDuration && {\n                  ticks: {\n                    callback: (value: any) => {\n                      return formatDurationFromSeconds(value);\n                    }\n                  }\n                }),\n                grid: { color: 'rgba(0,0,0,0.04)' }\n              },\n              x: {\n                type: 'time',\n                time: {\n                  unit: 'day',\n                  tooltipFormat: 'DDD', // Luxon for 'Feb 16, 2025'\n                  displayFormats: {\n                    day: 'MMM dd'\n                  }\n                },\n                grid: {\n                  display: false\n                },\n                stacked: true\n              }\n            }\n          }\n        };\n        this.chart = new Chart(this.ctx, chartData as any);\n      }\n    }\n  }\n\n  private handleSplitsChanged(e: Event) {\n    const select = e.target as Select<SelectOption>;\n    this.splits = select.values.map((option) => {\n      return option.value;\n    });\n  }\n\n  private handleToggleConfig() {\n    this.showConfig = !this.showConfig;\n    if (!this.showConfig) {\n      this.splits = [];\n    }\n  }\n\n  protected render(): TemplateResult {\n    return html`<div>\n      ${this.header\n        ? html`<div class=\"chart-title\">${this.header}</div>`\n        : null}\n      <div id=\"canvas-wrapper\"></div>\n      ${this.config && this.data\n        ? html`\n            <div\n              class=\"${getClasses({\n                'config-toggle': true,\n                show: this.showConfig && this.data?.datasets?.length > 1\n              })}\"\n              style=\"display: flex; flex-direction: row; align-items: center; justify-content: space-between;\"\n            >\n              <div></div>\n              <div>\n                <temba-icon\n                  animateChange=\"spin\"\n                  name=\"${this.showConfig ? 'close' : 'settings'}\"\n                  clickable\n                  size=\"1.5\"\n                  @click=${this.handleToggleConfig}\n                ></temba-icon>\n              </div>\n            </div>\n          `\n        : null}\n\n      <div class=${getClasses({ config: true, show: this.showConfig })}>\n        <temba-select\n          multi\n          placeholder=\"Select ${this.dataname}\"\n          options=${JSON.stringify(\n            this.data?.datasets.map((dataset) => ({\n              name: dataset.label,\n              value: dataset.label\n            }))\n          )}\n          .values=${this.splits.map((s) => ({ name: s, value: s }))}\n          @change=${this.handleSplitsChanged}\n        >\n        </temba-select>\n        <div></div>\n      </div>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"TembaChart.js","sourceRoot":"","sources":["../../../src/chart/TembaChart.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,sDAAsD;AACtD,OAAO,KAAoB,MAAM,eAAe,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAExD,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEhC,MAAM,eAAe,GAAgC,kBAAkB,CAAC;AACxE,MAAM,cAAc,GAAG;IACrB,sCAAsC;IACtC,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,qBAAqB,EAAE;QACrB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,qBAAqB,EAAE;QACrB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,4CAA4C;IAC5C,gBAAgB,EAAE;QAChB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,gBAAgB,EAAE;QAChB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,gBAAgB,EAAE;QAChB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IAED,8CAA8C;IAC9C,kBAAkB,EAAE;QAClB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,mBAAmB,EAAE;QACnB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,oBAAoB,EAAE;QACpB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;IACD,iBAAiB,EAAE;QACjB,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,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","sourcesContent":["import { RapidElement } from '../RapidElement';\nimport { property, state } from 'lit/decorators.js';\nimport { css, html, PropertyValueMap, TemplateResult } from 'lit';\n\nimport { Select, SelectOption } from '../select/Select';\nimport { darkenColor, getClasses } from '../utils';\nimport { getStore } from '../store/Store';\n\n// eslint-disable-next-line import/no-named-as-default\nimport Chart, { ChartType } from 'chart.js/auto';\nimport 'chartjs-adapter-luxon';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\n\nChart.register(ChartDataLabels);\n\nconst DEFAULT_PALETTE: keyof typeof COLOR_PALETTES = 'qualitative-set1';\nconst COLOR_PALETTES = {\n  // Qualitative (categorical, no order)\n  'qualitative-set1': [\n    '#5ea3db',\n    '#c186e3',\n    '#66c2a5',\n    '#fc8d62',\n    '#a6d854',\n    '#ffd92f',\n    '#e5c494',\n    '#b3b3b3'\n  ],\n  'qualitative-set2': [\n    '#377eb8',\n    '#984ea3',\n    '#4daf4a',\n    '#ff7f00',\n    '#e41a1c',\n    '#a65628',\n    '#f781bf',\n    '#ffff33'\n  ],\n  'qualitative-set3': [\n    '#1b9e77',\n    '#d95f02',\n    '#7570b3',\n    '#e7298a',\n    '#66a61e',\n    '#e6ab02',\n    '#a6761d'\n  ],\n  'qualitative-paired': [\n    '#1f78b4',\n    '#a6cee3',\n    '#6a3d9a',\n    '#cab2d6',\n    '#33a02c',\n    '#b2df8a',\n    '#e31a1c',\n    '#fb9a99',\n    '#ff7f00',\n    '#fdbf6f'\n  ],\n  'qualitative-accent': [\n    '#7fc97f',\n    '#beaed4',\n    '#fdc086',\n    '#ffff99',\n    '#386cb0',\n    '#f0027f',\n    '#bf5b17',\n    '#666666'\n  ],\n  'qualitative-pastel1': [\n    '#fbb4ae',\n    '#b3cde3',\n    '#ccebc5',\n    '#decbe4',\n    '#fed9a6',\n    '#ffffcc',\n    '#e5d8bd',\n    '#fddaec'\n  ],\n  'qualitative-pastel2': [\n    '#b3e2cd',\n    '#fdcdac',\n    '#cbd5e8',\n    '#f4cae4',\n    '#e6f5c9',\n    '#fff2ae',\n    '#f1e2cc'\n  ],\n  // Diverging (for data with midpoint like 0)\n  'diverging-prgn': [\n    '#40004b',\n    '#762a83',\n    '#9970ab',\n    '#c2a5cf',\n    '#e7d4e8',\n    '#f7f7f7',\n    '#d9f0d3',\n    '#a6dba0',\n    '#5aae61',\n    '#1b7837',\n    '#00441b'\n  ],\n  'diverging-spectral': [\n    '#9e0142',\n    '#d53e4f',\n    '#f46d43',\n    '#fdae61',\n    '#fee08b',\n    '#ffffbf',\n    '#e6f598',\n    '#abdda4',\n    '#66c2a5',\n    '#3288bd',\n    '#5e4fa2'\n  ],\n  'diverging-piyg': [\n    '#8e0152',\n    '#c51b7d',\n    '#de77ae',\n    '#f1b6da',\n    '#fde0ef',\n    '#f7f7f7',\n    '#e6f5d0',\n    '#b8e186',\n    '#7fbc41',\n    '#4d9221',\n    '#276419'\n  ],\n  'diverging-rdylgn': [\n    '#a50026',\n    '#d73027',\n    '#f46d43',\n    '#fdae61',\n    '#fee08b',\n    '#ffffbf',\n    '#d9ef8b',\n    '#a6d96a',\n    '#66bd63',\n    '#1a9850',\n    '#006837'\n  ],\n  'diverging-brbg': [\n    '#543005',\n    '#8c510a',\n    '#bf812d',\n    '#dfc27d',\n    '#f6e8c3',\n    '#f5f5f5',\n    '#c7eae5',\n    '#80cdc1',\n    '#35978f',\n    '#01665e',\n    '#003c30'\n  ],\n\n  // Sequential (for continuous or ordered data)\n  'sequential-blues': [\n    '#f7fbff',\n    '#deebf7',\n    '#c6dbef',\n    '#9ecae1',\n    '#6baed6',\n    '#4292c6',\n    '#2171b5',\n    '#08519c',\n    '#08306b'\n  ],\n  'sequential-greens': [\n    '#f7fcf5',\n    '#e5f5e0',\n    '#c7e9c0',\n    '#a1d99b',\n    '#74c476',\n    '#41ab5d',\n    '#238b45',\n    '#006d2c',\n    '#00441b'\n  ],\n  'sequential-oranges': [\n    '#fff5eb',\n    '#fee6ce',\n    '#fdd0a2',\n    '#fdae6b',\n    '#fd8d3c',\n    '#f16913',\n    '#d94801',\n    '#a63603',\n    '#7f2704'\n  ],\n  'sequential-purples': [\n    '#fcfbfd',\n    '#efedf5',\n    '#dadaeb',\n    '#bcbddc',\n    '#9e9ac8',\n    '#807dba',\n    '#6a51a3',\n    '#54278f',\n    '#3f007d'\n  ],\n  'sequential-reds': [\n    '#fff5f0',\n    '#fee0d2',\n    '#fcbba1',\n    '#fc9272',\n    '#fb6a4a',\n    '#ef3b2c',\n    '#cb181d',\n    '#a50f15',\n    '#67000d'\n  ],\n  'sequential-ylgnbu': [\n    '#ffffd9',\n    '#edf8b1',\n    '#c7e9b4',\n    '#7fcdbb',\n    '#41b6c4',\n    '#1d91c0',\n    '#225ea8',\n    '#253494',\n    '#081d58'\n  ]\n};\n\nconst otherBackgroundColor = 'rgba(212, 212, 212, 0.5)';\n\n/**\n * Formats a duration in seconds to a human-readable string showing the two largest units.\n * Examples: 68787 -> \"19h 6m\", 958000 -> \"11d 2h\", 3661 -> \"1h 1m\"\n */\nexport function formatDurationFromSeconds(seconds: number): string {\n  if (seconds === 0) {\n    return '0s';\n  }\n\n  const totalDays = Math.floor(seconds / 86400);\n  const remainingAfterDays = seconds % 86400;\n  const remainingHours = Math.floor(remainingAfterDays / 3600);\n  const remainingAfterHours = remainingAfterDays % 3600;\n  const remainingMinutes = Math.floor(remainingAfterHours / 60);\n  const remainingSeconds = remainingAfterHours % 60;\n\n  const units = [];\n\n  if (totalDays > 0) {\n    units.push(`${totalDays}d`);\n  }\n  if (remainingHours > 0) {\n    units.push(`${remainingHours}h`);\n  }\n  if (remainingMinutes > 0 && units.length < 2) {\n    units.push(`${remainingMinutes}m`);\n  }\n  if (remainingSeconds > 0 && units.length < 2) {\n    units.push(`${remainingSeconds}s`);\n  }\n\n  // Return the first two most significant units\n  return units.slice(0, 2).join(' ');\n}\n\nexport interface RapidChartData {\n  labels: string[];\n  datasets: { label: string; data: number[] }[];\n}\n\nexport class TembaChart extends RapidElement {\n  @property({ type: String })\n  chartType: ChartType = 'bar';\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  header: string = '';\n\n  @property({ type: Boolean })\n  other: boolean = false;\n\n  @property({ type: Object })\n  data: RapidChartData;\n\n  @state()\n  datasets: { label: string; data: number[] }[] = [];\n\n  @property({ type: Number })\n  maxSplits: number = 2;\n\n  @property({ type: String, attribute: 'splits' })\n  splitNames: string;\n\n  @property({ type: String })\n  xType: 'category' | 'time' = 'category';\n\n  @property({ type: String })\n  yType: 'count' | 'duration' = 'count';\n\n  @property({ type: Boolean })\n  hideOther: boolean = false;\n\n  @state()\n  splits: string[] = [];\n\n  @property({ type: String })\n  dataname = 'Counts';\n\n  @property({ type: Boolean })\n  single: boolean = false;\n\n  @property({ type: Boolean })\n  legend: boolean = false;\n\n  @property({ type: Boolean })\n  config: boolean = false;\n\n  @property({ type: Boolean })\n  showAll: boolean = false;\n\n  @property({ type: Number })\n  colorIndex: number = 0;\n\n  @state()\n  showConfig: boolean = false;\n\n  @property({ type: String })\n  palette: keyof typeof COLOR_PALETTES;\n\n  @property({ type: Number })\n  opacity: number = 1;\n\n  @property({ type: Number })\n  seriesBorderRadius: number = 2;\n\n  @property({ type: Number })\n  seriesBorderWidth: number = 1;\n\n  @property({ type: Boolean, attribute: 'percent' })\n  showPercent: boolean = false;\n\n  // head-room for labels when percentages are visible\n  private getInflatedMax(): number | undefined {\n    if (!this.showPercent || !this.data) return undefined;\n\n    // total stacked value for each x-index\n    const totals: number[] = Array(this.data.labels.length).fill(0);\n    for (const ds of this.datasets) {\n      ds.data.forEach((v, i) => (totals[i] += v));\n    }\n    const maxStack = Math.max(...totals);\n    return maxStack > 0 ? maxStack * 1.15 : undefined;\n  }\n\n  chart: Chart;\n  shadowRootDiv: HTMLDivElement;\n  canvas: HTMLCanvasElement;\n  ctx: CanvasRenderingContext2D;\n\n  static get styles() {\n    return css`\n      .chart-title {\n        font-size: 1.2em;\n        font-weight: 600;\n        text-align: center;\n      }\n\n      temba-select {\n        display: block;\n      }\n\n      .config-toggle {\n        margin-top: -2.5em;\n        margin-right: -0.5em;\n        color: #bbb;\n        display: none;\n      }\n\n      .config-toggle:hover {\n        color: #666;\n      }\n\n      .config-toggle.show {\n        color: #666;\n        display: block;\n      }\n\n      .config {\n        max-height: 0px;\n        padding: 0em 1em;\n        border-radius: var(--curvature);\n        border: 1px solid transparent;\n        background: transparent;\n        overflow: hidden;\n        transition: all 0.2s ease-in-out;\n      }\n\n      .config.show {\n        padding: 2em 1em 1.5em 1em;\n        max-height: 50px;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    const wrapper = this.shadowRoot.querySelector('#canvas-wrapper');\n    this.canvas = document.createElement('canvas');\n    this.canvas.setAttribute('height', '300px');\n    wrapper.appendChild(this.canvas);\n    this.ctx = this.canvas.getContext('2d');\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (changes.has('splitNames')) {\n      this.splits = this.splitNames.split(',').map((s) => s.trim());\n    }\n\n    if (changes.has('data') || changes.has('splits')) {\n      this.calculateSplits();\n    }\n\n    if (changes.has('datasets')) {\n      this.updateChart();\n    }\n\n    if (changes.has('url')) {\n      const store = getStore();\n      store.getUrl(this.url, { skipCache: true }).then((response) => {\n        this.data = response.json.data;\n      });\n    }\n\n    if (changes.has('chartType')) {\n      if (this.chartType === 'line') {\n        this.seriesBorderWidth = Math.max(1, this.seriesBorderWidth);\n      }\n    }\n\n    if (changes.has('showPercent') && this.chart) {\n      const yScale = (this.chart.options.scales as any).y;\n      yScale.ticks.display = !this.showPercent;\n      yScale.grid.display = !this.showPercent;\n      yScale.border.display = !this.showPercent;\n      yScale.max = this.showPercent ? this.getInflatedMax() : undefined;\n      this.chart.update();\n    }\n  }\n\n  /**\n   * Returns a tuple: [backgroundColors[], borderColors[]].\n   * Border colors are darkened versions of the base palette (before transparency).\n   * Background colors have transparency applied.\n   */\n  get colors(): [string[], string[]] {\n    const baseColors =\n      COLOR_PALETTES[this.palette] || COLOR_PALETTES[DEFAULT_PALETTE];\n    // clamp transparency between 0 and 1\n    const alpha = Math.max(0, Math.min(1, this.opacity));\n    // borders darken base color, no transparency\n    const borderColors = baseColors.map((color) => darkenColor(color, 0.25));\n    // backgrounds apply transparency to base color\n    const backgroundColors = baseColors.map((color) => {\n      // if already rgba, just replace the alpha\n      if (color.startsWith('rgba')) {\n        return color.replace(\n          /rgba\\(([^,]+),([^,]+),([^,]+),([^)]+)\\)/,\n          (_m, r, g, b) => {\n            return `rgba(${r},${g},${b},${alpha})`;\n          }\n        );\n      }\n      // if already rgb, convert to rgba\n      if (color.startsWith('rgb(')) {\n        return color.replace(\n          /rgb\\(([^,]+),([^,]+),([^,]+)\\)/,\n          (_m, r, g, b) => {\n            return `rgba(${r},${g},${b},${alpha})`;\n          }\n        );\n      }\n      // if hex, convert to rgba\n      if (color.startsWith('#')) {\n        let hex = color.replace('#', '');\n        if (hex.length === 3) {\n          hex = hex\n            .split('')\n            .map((c) => c + c)\n            .join('');\n        }\n        const num = parseInt(hex, 16);\n        const r = (num >> 16) & 255;\n        const g = (num >> 8) & 255;\n        const b = num & 255;\n        return `rgba(${r},${g},${b},${alpha})`;\n      }\n      // fallback\n      return color;\n    });\n    return [backgroundColors, borderColors];\n  }\n\n  private calculateSplits() {\n    if (this.data) {\n      const datasets = [];\n      const sums = [];\n      const [backgroundColors, borderColors] = this.colors;\n      for (const dataset of this.data.datasets) {\n        if (\n          !this.showAll &&\n          this.splits.find((s) => s === dataset.label) === undefined\n        ) {\n          for (let i = 0; i < dataset.data.length; i++) {\n            if (sums[i] === undefined) {\n              sums[i] = dataset.data[i];\n            } else {\n              sums[i] += dataset.data[i];\n            }\n          }\n        } else {\n          const colorIdx =\n            (datasets.length + this.colorIndex) % backgroundColors.length;\n          const bgColor = backgroundColors[colorIdx];\n          const borderColor = borderColors[colorIdx];\n          datasets.push({\n            ...dataset,\n            backgroundColor: bgColor,\n            borderColor,\n            borderWidth: this.seriesBorderWidth,\n            borderRadius: this.seriesBorderRadius\n          });\n        }\n      }\n\n      if (datasets.length === 0) {\n        const idx = this.colorIndex % backgroundColors.length;\n        datasets.push({\n          label: this.single ? this.dataname : `All ${this.dataname}`,\n          data: sums,\n          backgroundColor: backgroundColors[idx],\n          borderColor: borderColors[idx],\n          borderWidth: this.seriesBorderWidth,\n          borderRadius: this.seriesBorderRadius\n        });\n      } else {\n        if (!this.hideOther && !this.showAll) {\n          datasets.push({\n            label: 'Other',\n            data: sums,\n            backgroundColor: otherBackgroundColor,\n            borderColor: darkenColor(otherBackgroundColor, 0.05),\n            borderWidth: 1,\n            borderRadius: this.seriesBorderRadius\n          });\n        }\n      }\n      this.datasets = datasets;\n    }\n  }\n\n  public updateChart(): void {\n    if (this.datasets?.length > 0) {\n      const grandTotal =\n        this.datasets.reduce(\n          (sum: number, ds: any) =>\n            sum +\n            (ds.data as number[]).reduce(\n              (dsSum: number, v: number) => dsSum + (v ?? 0),\n              0\n            ),\n          0\n        ) || undefined;\n\n      const percentFormatter = (value: number): string => {\n        const pct = grandTotal ? (value / grandTotal) * 100 : 0;\n        return `${Math.round(pct)}%`;\n      };\n\n      if (this.chart) {\n        this.chart.data.labels = this.data.labels;\n        this.chart.data.datasets = this.datasets;\n\n        // update y-axis max dynamically\n        if (this.showPercent) {\n          (this.chart.options.scales as any).y.max = this.getInflatedMax();\n        }\n\n        const datalabels = this.chart.options.plugins.datalabels || {};\n        datalabels.display = this.showPercent;\n        if (this.showPercent) {\n          datalabels.formatter = percentFormatter;\n        } else {\n          delete datalabels.formatter;\n        }\n        this.chart.options.plugins.datalabels = datalabels;\n\n        this.chart.update();\n      } else {\n        const chartData = {\n          type: this.chartType,\n          data: {\n            labels: this.data.labels,\n            datasets: this.datasets\n          },\n          options: {\n            maxBarThickness: 80,\n            plugins: {\n              legend: { display: this.legend },\n              tooltip: {\n                callbacks: {\n                  label: (context: any) => {\n                    const label = context.dataset.label || '';\n                    const value = context.parsed.y;\n                    if (this.yType === 'duration') {\n                      return `${label}: ${formatDurationFromSeconds(value)}`;\n                    }\n                    return `${label}: ${value}`;\n                  }\n                }\n              },\n              datalabels: {\n                display: this.showPercent,\n                anchor: 'end',\n                align: 'end',\n                offset: -3,\n                clamp: true,\n                ...(this.showPercent && { formatter: percentFormatter }),\n                color: '#666',\n                font: { weight: '600' }\n              }\n            },\n            responsive: true,\n            maintainAspectRatio: false,\n            animations: {\n              x: {\n                // no horizontal motion\n                duration: 0\n              },\n              y: {\n                duration: 200,\n                easing: 'easeOutCubic'\n              }\n            },\n            scales: {\n              y: {\n                min: 0,\n                ...(this.showPercent && { max: this.getInflatedMax() }),\n                stacked: true,\n                grid: {\n                  color: 'rgba(0,0,0,0.04)',\n                  display: !this.showPercent, // hide gridlines in percent mode\n                  drawBorder: !this.showPercent // hides axis line when false\n                },\n                border: {\n                  display: !this.showPercent // Chart.js >= 4\n                },\n                ticks: {\n                  display: !this.showPercent,\n                  ...(this.yType === 'duration' &&\n                    !this.showPercent && {\n                      callback: (value: any) => formatDurationFromSeconds(value)\n                    })\n                }\n              },\n              x: {\n                type: this.xType,\n                grid: { display: false },\n                stacked: true,\n                time: {\n                  unit: 'day',\n                  tooltipFormat: 'DDD',\n                  displayFormats: { day: 'MMM dd' }\n                }\n              }\n            }\n          }\n        };\n\n        this.chart = new Chart(this.ctx, chartData as any);\n      }\n    }\n  }\n\n  private handleSplitsChanged(e: Event) {\n    const select = e.target as Select<SelectOption>;\n    this.splits = select.values.map((option) => {\n      return option.value;\n    });\n  }\n\n  private handleToggleConfig() {\n    this.showConfig = !this.showConfig;\n    if (!this.showConfig) {\n      this.splits = [];\n    }\n  }\n\n  protected render(): TemplateResult {\n    return html`<div>\n      ${this.header\n        ? html`<div class=\"chart-title\">${this.header}</div>`\n        : null}\n      <div id=\"canvas-wrapper\"></div>\n      ${this.config && this.data\n        ? html`\n            <div\n              class=\"${getClasses({\n                'config-toggle': true,\n                show: this.showConfig && this.data?.datasets?.length > 1\n              })}\"\n              style=\"display: flex; flex-direction: row; align-items: center; justify-content: space-between;\"\n            >\n              <div></div>\n              <div>\n                <temba-icon\n                  animateChange=\"spin\"\n                  name=\"${this.showConfig ? 'close' : 'settings'}\"\n                  clickable\n                  size=\"1.5\"\n                  @click=${this.handleToggleConfig}\n                ></temba-icon>\n              </div>\n            </div>\n          `\n        : null}\n\n      <div class=${getClasses({ config: true, show: this.showConfig })}>\n        <temba-select\n          multi\n          placeholder=\"Select ${this.dataname}\"\n          options=${JSON.stringify(\n            this.data?.datasets.map((dataset) => ({\n              name: dataset.label,\n              value: dataset.label\n            }))\n          )}\n          .values=${this.splits.map((s) => ({ name: s, value: s }))}\n          @change=${this.handleSplitsChanged}\n        >\n        </temba-select>\n        <div></div>\n      </div>\n    </div>`;\n  }\n}\n"]}

package/out-tsc/src/flow/EditorNode.js

@@ -18,8 +18,9 @@ export class EditorNode extends RapidElement {
         min-width: 200px;
         border-radius: calc(var(--curvature) * 1.5);
         overflow: hidden;
+        color: #333;
       }
-
+        
       .action {
         max-width: 200px;
       }

package/out-tsc/src/flow/EditorNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,aAAa,EAAY,MAAM,UAAU,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,OAAO,UAAW,SAAQ,YAAY;IAC1C,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAWD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8EV,CAAC;IACH,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAExC,wDAAwD;YACxD,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACnC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBAC3B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACrC,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;gBAC5D,CAAC;YACH,CAAC;YAED,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACxC,MAAM,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;YAEzC,QAAQ,EAAE;iBACP,QAAQ,EAAE;iBACV,YAAY,CACX,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,EAClC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CACnC,CAAC;QACN,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,MAAgB;QAClC,OAAO,IAAI,CAAA,wCAAwC,MAAM,CAAC,KAAK;QAC3D,MAAM,CAAC,IAAI;WACR,CAAC;IACV,CAAC;IAEO,YAAY,CAAC,IAAU,EAAE,MAAc;QAC7C,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAE1C,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,IAAI,CAAA,sBAAsB,MAAM,CAAC,IAAI;UACxC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;;YAEtB,MAAM,CAAC,MAAM;gBACb,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC;gBAC7B,CAAC,CAAC,IAAI,CAAA,QAAQ,MAAM,CAAC,IAAI,QAAQ;;aAEhC,CAAC;QACV,CAAC;QACD,OAAO,IAAI,CAAA,QAAQ,MAAM,CAAC,IAAI,QAAQ,CAAC;IACzC,CAAC;IAEO,YAAY,CAAC,MAAc,EAAE,EAAU;QAC7C,MAAM,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,IAAI,CAAA;UACP,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;UACxB,MAAM,CAAC,WAAW;gBAClB,CAAC,CAAC,IAAI,CAAA;;yCAEyB,MAAM,CAAC,WAAW;mBACxC;gBACT,CAAC,CAAC,IAAI;aACH,CAAC;QACV,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,IAAU;QACjC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;YAC5C,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;YACzD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAC1B,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,SAAS,CAChD,CAAC;YAEF,OAAO,IAAI,CAAA;6BACY,QAAQ,CAAC,IAAI;UAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;aAClB,CAAC;QACV,CAAC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,2BAA2B,UAAU,QAAQ,CAAC;IAC3D,CAAC;IAEO,UAAU,CAAC,IAAU;QAC3B,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,IAAI;cACP,UAAU,CAAC;YACjB,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB;SACnC,CAAC;YACI,CAAC;IACX,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,IAAI,CAAC,IAAI;;sBAEN,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG;;UAE/D,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;YACrC,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAClD,CAAC,CAAC;UACA,IAAI,CAAC,IAAI,CAAC,MAAM;YAChB,CAAC,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC;cAClD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACtC,CAAC,CAAC,IAAI,CAAA;gBACA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC7B,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC,CAAC;mBACG;;KAEd,CAAC;IACJ,CAAC;CACF;AA5MS;IADP,KAAK,EAAE;2CACiB;AAGjB;IADP,KAAK,EAAE;wCACW;AAGX;IADP,KAAK,EAAE;sCACW","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { state } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\n\nexport class EditorNode extends RapidElement {\n  createRenderRoot() {\n    return this;\n  }\n\n  @state()\n  private plumber: Plumber;\n\n  @state()\n  private node: Node;\n\n  @state()\n  private ui: NodeUI;\n\n  static get styles() {\n    return css`\n      .node {\n        position: absolute;\n        background-color: #fff;\n        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n        min-width: 200px;\n        border-radius: calc(var(--curvature) * 1.5);\n        overflow: hidden;\n      }\n\n      .action {\n        max-width: 200px;\n      }\n\n      .action .body {\n        padding: 1em;\n      }\n\n      .action .title,\n      .router .title {\n        color: #fff;\n        padding: 5px 1px;\n        text-align: center;\n        font-size: 1em;\n        font-weight: normal;\n      }\n\n      .quick-replies {\n        margin-top: 0.5em;\n      }\n\n      .quick-reply {\n        background-color: #f0f0f0;\n        border: 1px solid #e0e0e0;\n        border-radius: calc(var(--curvature) * 1.5);\n        padding: 0.2em 1em;\n        display: inline-block;\n        font-size: 0.8em;\n        margin: 0.2em;\n      }\n\n      .categories {\n        display: flex;\n        flex-direction: row;\n\n      }\n\n      .category {\n        margin:-1px -0.5px;\n        border: 1px solid #f3f3f3;\n        padding: 0.75em;\n        flex-grow:1;\n        text-align: center;\n      }\n\n      .action-exits {\n        padding-bottom: 0.75em;\n        margin-top: -0.75em;\n      }\n\n      .category .title {\n        font-weight: normal;\n        font-size: 1em;\n      }\n\n      .router .body {\n        padding: 0.75em;\n      }\n\n      .result-name {\n        font-weight: bold;\n        display: inline-block;\n      }\n      \n      .exit {\n        padding-top: 10px;\n        margin-bottom: -10px;\n      }\n  }`;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('node')) {\n      this.plumber.makeTarget(this.node.uuid);\n\n      // our node was changed, see if we have new destinations\n      for (const exit of this.node.exits) {\n        if (!exit.destination_uuid) {\n          this.plumber.makeSource(exit.uuid);\n        } else {\n          this.plumber.connectIds(exit.uuid, exit.destination_uuid);\n        }\n      }\n\n      const ele = this.querySelector('.node');\n      const rect = ele.getBoundingClientRect();\n\n      getStore()\n        .getState()\n        .expandCanvas(\n          this.ui.position.left + rect.width,\n          this.ui.position.top + rect.height\n        );\n    }\n  }\n\n  private renderTitle(config: UIConfig) {\n    return html`<div class=\"title\" style=\"background:${config.color}\">\n      ${config.name}\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action) {\n    const config = EDITOR_CONFIG[action.type];\n\n    if (config) {\n      return html`<div class=\"action ${action.type}\">\n        ${this.renderTitle(config)}\n        <div class=\"body\">\n          ${config.render\n            ? config.render(node, action)\n            : html`<pre>${action.type}</pre>`}\n        </div>\n      </div>`;\n    }\n    return html`<div>${action.type}</div>`;\n  }\n\n  private renderRouter(router: Router, ui: NodeUI) {\n    const config = EDITOR_CONFIG[ui.type];\n    if (config) {\n      return html`<div class=\"router\">\n        ${this.renderTitle(config)}\n        ${router.result_name\n          ? html`<div class=\"body\">\n              Save as\n              <div class=\"result-name\">${router.result_name}</div>\n            </div>`\n          : null}\n      </div>`;\n    }\n  }\n\n  private renderCategories(node: Node) {\n    if (!node.router || !node.router.categories) {\n      return null;\n    }\n    const categories = node.router.categories.map((category) => {\n      const exit = node.exits.find(\n        (exit: Exit) => exit.uuid == category.exit_uuid\n      );\n\n      return html`<div class=\"category\">\n        <div class=\"title\">${category.name}</div>\n        ${this.renderExit(exit)}\n      </div>`;\n    });\n\n    return html`<div class=\"categories\">${categories}</div>`;\n  }\n\n  private renderExit(exit: Exit): TemplateResult {\n    return html`<div\n      id=\"${exit.uuid}\"\n      class=${getClasses({\n        exit: true,\n        connected: !!exit.destination_uuid\n      })}\n    ></div>`;\n  }\n\n  public render() {\n    return html`\n      <div\n        id=\"${this.node.uuid}\"\n        class=\"node\"\n        style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n      >\n        ${this.node.actions.map((actionSpec) => {\n          return this.renderAction(this.node, actionSpec);\n        })}\n        ${this.node.router\n          ? html` ${this.renderRouter(this.node.router, this.ui)}\n            ${this.renderCategories(this.node)}`\n          : html`<div class=\"action-exits\">\n              ${this.node.exits.map((exit) => {\n                return this.renderExit(exit);\n              })}\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { state } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\n\nexport class EditorNode extends RapidElement {\n  createRenderRoot() {\n    return this;\n  }\n\n  @state()\n  private plumber: Plumber;\n\n  @state()\n  private node: Node;\n\n  @state()\n  private ui: NodeUI;\n\n  static get styles() {\n    return css`\n      .node {\n        position: absolute;\n        background-color: #fff;\n        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n        min-width: 200px;\n        border-radius: calc(var(--curvature) * 1.5);\n        overflow: hidden;\n        color: #333;\n      }\n        \n      .action {\n        max-width: 200px;\n      }\n\n      .action .body {\n        padding: 1em;\n      }\n\n      .action .title,\n      .router .title {\n        color: #fff;\n        padding: 5px 1px;\n        text-align: center;\n        font-size: 1em;\n        font-weight: normal;\n      }\n\n      .quick-replies {\n        margin-top: 0.5em;\n      }\n\n      .quick-reply {\n        background-color: #f0f0f0;\n        border: 1px solid #e0e0e0;\n        border-radius: calc(var(--curvature) * 1.5);\n        padding: 0.2em 1em;\n        display: inline-block;\n        font-size: 0.8em;\n        margin: 0.2em;\n      }\n\n      .categories {\n        display: flex;\n        flex-direction: row;\n\n      }\n\n      .category {\n        margin:-1px -0.5px;\n        border: 1px solid #f3f3f3;\n        padding: 0.75em;\n        flex-grow:1;\n        text-align: center;\n      }\n\n      .action-exits {\n        padding-bottom: 0.75em;\n        margin-top: -0.75em;\n      }\n\n      .category .title {\n        font-weight: normal;\n        font-size: 1em;\n      }\n\n      .router .body {\n        padding: 0.75em;\n      }\n\n      .result-name {\n        font-weight: bold;\n        display: inline-block;\n      }\n      \n      .exit {\n        padding-top: 10px;\n        margin-bottom: -10px;\n      }\n  }`;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('node')) {\n      this.plumber.makeTarget(this.node.uuid);\n\n      // our node was changed, see if we have new destinations\n      for (const exit of this.node.exits) {\n        if (!exit.destination_uuid) {\n          this.plumber.makeSource(exit.uuid);\n        } else {\n          this.plumber.connectIds(exit.uuid, exit.destination_uuid);\n        }\n      }\n\n      const ele = this.querySelector('.node');\n      const rect = ele.getBoundingClientRect();\n\n      getStore()\n        .getState()\n        .expandCanvas(\n          this.ui.position.left + rect.width,\n          this.ui.position.top + rect.height\n        );\n    }\n  }\n\n  private renderTitle(config: UIConfig) {\n    return html`<div class=\"title\" style=\"background:${config.color}\">\n      ${config.name}\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action) {\n    const config = EDITOR_CONFIG[action.type];\n\n    if (config) {\n      return html`<div class=\"action ${action.type}\">\n        ${this.renderTitle(config)}\n        <div class=\"body\">\n          ${config.render\n            ? config.render(node, action)\n            : html`<pre>${action.type}</pre>`}\n        </div>\n      </div>`;\n    }\n    return html`<div>${action.type}</div>`;\n  }\n\n  private renderRouter(router: Router, ui: NodeUI) {\n    const config = EDITOR_CONFIG[ui.type];\n    if (config) {\n      return html`<div class=\"router\">\n        ${this.renderTitle(config)}\n        ${router.result_name\n          ? html`<div class=\"body\">\n              Save as\n              <div class=\"result-name\">${router.result_name}</div>\n            </div>`\n          : null}\n      </div>`;\n    }\n  }\n\n  private renderCategories(node: Node) {\n    if (!node.router || !node.router.categories) {\n      return null;\n    }\n    const categories = node.router.categories.map((category) => {\n      const exit = node.exits.find(\n        (exit: Exit) => exit.uuid == category.exit_uuid\n      );\n\n      return html`<div class=\"category\">\n        <div class=\"title\">${category.name}</div>\n        ${this.renderExit(exit)}\n      </div>`;\n    });\n\n    return html`<div class=\"categories\">${categories}</div>`;\n  }\n\n  private renderExit(exit: Exit): TemplateResult {\n    return html`<div\n      id=\"${exit.uuid}\"\n      class=${getClasses({\n        exit: true,\n        connected: !!exit.destination_uuid\n      })}\n    ></div>`;\n  }\n\n  public render() {\n    return html`\n      <div\n        id=\"${this.node.uuid}\"\n        class=\"node\"\n        style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n      >\n        ${this.node.actions.map((actionSpec) => {\n          return this.renderAction(this.node, actionSpec);\n        })}\n        ${this.node.router\n          ? html` ${this.renderRouter(this.node.router, this.ui)}\n            ${this.renderCategories(this.node)}`\n          : html`<div class=\"action-exits\">\n              ${this.node.exits.map((exit) => {\n                return this.renderExit(exit);\n              })}\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}