@nyaruka/temba-components 0.122.0 → 0.124.0

package/src/chart/TembaChart.ts

@@ -6,35 +6,66 @@ import { Select, SelectOption } from '../select/Select';
 import { getClasses } from '../utils';
 import { getStore } from '../store/Store';
 
+// eslint-disable-next-line import/no-named-as-default
 import Chart, { ChartType } from 'chart.js/auto';
 import 'chartjs-adapter-luxon';
 
 const colors = [
+  'rgba(54, 162, 235, 0.2)',
   'rgba(255, 159, 64, 0.2)',
   'rgba(75, 192, 192, 0.2)',
-  'rgba(54, 162, 235, 0.2)',
   'rgba(153, 102, 255, 0.2)',
   'rgba(255, 205, 86, 0.2)',
-  'rgba(255, 99, 132, 0.2)',
-  'rgba(201, 203, 207, 0.2)'
+  'rgba(255, 99, 132, 0.2)'
 ];
 
 const colorsBorder = [
+  'rgb(54, 162, 235)',
   'rgb(255, 159, 64)',
   'rgb(75, 192, 192)',
-  'rgb(54, 162, 235)',
   'rgb(153, 102, 255)',
   'rgb(255, 205, 86)',
-  'rgb(255, 99, 132)',
-  'rgb(201, 203, 207)'
+  'rgb(255, 99, 132)'
 ];
 
-const allBorderColor = 'rgb(54, 162, 235)';
-const allBackgroundColor = 'rgba(54, 162, 235, 0.2)';
-
 const otherBackgroundColor = 'rgba(201, 203, 207, 0.2)';
 const otherBorderColor = 'rgb(201, 203, 207)';
 
+/**
+ * Formats a duration in seconds to a human-readable string showing the two largest units.
+ * Examples: 68787 -> "19h 6m", 958000 -> "11d 2h", 3661 -> "1h 1m"
+ */
+export function formatDurationFromSeconds(seconds: number): string {
+  if (seconds === 0) {
+    return '0s';
+  }
+
+  const totalDays = Math.floor(seconds / 86400);
+  const remainingAfterDays = seconds % 86400;
+  const remainingHours = Math.floor(remainingAfterDays / 3600);
+  const remainingAfterHours = remainingAfterDays % 3600;
+  const remainingMinutes = Math.floor(remainingAfterHours / 60);
+  const remainingSeconds = remainingAfterHours % 60;
+
+  const units = [];
+
+  if (totalDays > 0) {
+    units.push(`${totalDays}d`);
+  }
+  if (remainingHours > 0) {
+    units.push(`${remainingHours}h`);
+  }
+  if (remainingMinutes > 0 && units.length < 2) {
+    units.push(`${remainingMinutes}m`);
+  }
+  if (remainingSeconds > 0 && units.length < 2) {
+    units.push(`${remainingSeconds}s`);
+  }
+
+  // Return the first two most significant units
+  return units.slice(0, 2).join(' ');
+}
+
 export interface RapidChartData {
   labels: string[];
   datasets: { label: string; data: number[] }[];
@@ -68,9 +99,21 @@ export class TembaChart extends RapidElement {
   @property({ type: String })
   dataname = 'Counts';
 
+  @property({ type: Boolean })
+  single: boolean = false;
+
+  @property({ type: Boolean })
+  legend: boolean = false;
+
   @property({ type: Boolean })
   config: boolean = false;
 
+  @property({ type: Boolean })
+  formatDuration: boolean = false;
+
+  @property({ type: Number })
+  colorIndex: number = 0;
+
   @state()
   showConfig: boolean = false;
 
@@ -180,8 +223,12 @@ export class TembaChart extends RapidElement {
         } else {
           datasets.push({
             ...dataset,
-            backgroundColor: colors[datasets.length % colors.length],
-            borderColor: colorsBorder[datasets.length % colorsBorder.length],
+            backgroundColor:
+              colors[(datasets.length + this.colorIndex) % colors.length],
+            borderColor:
+              colorsBorder[
+                (datasets.length + this.colorIndex) % colorsBorder.length
+              ],
             borderWidth: 1
           });
         }
@@ -189,10 +236,10 @@ export class TembaChart extends RapidElement {
 
       if (datasets.length === 0) {
         datasets.push({
-          label: `All ${this.dataname}`,
+          label: this.single ? this.dataname : `All ${this.dataname}`,
           data: sums,
-          backgroundColor: allBackgroundColor,
-          borderColor: allBorderColor,
+          backgroundColor: colors[this.colorIndex % colors.length],
+          borderColor: colorsBorder[this.colorIndex % colorsBorder.length],
           borderWidth: 1
         });
       } else {
@@ -222,6 +269,23 @@ export class TembaChart extends RapidElement {
             datasets: this.datasets
           },
           options: {
+            plugins: {
+              legend: {
+                display: this.legend
+              },
+              ...(this.formatDuration && {
+                tooltip: {
+                  callbacks: {
+                    label: (context: any) => {
+                      const label = context.dataset.label || '';
+                      const value = context.parsed.y;
+                      const formattedValue = formatDurationFromSeconds(value);
+                      return `${label}: ${formattedValue}`;
+                    }
+                  }
+                }
+              })
+            },
             responsive: true,
             maintainAspectRatio: false,
             animation: {
@@ -240,7 +304,14 @@ export class TembaChart extends RapidElement {
             scales: {
               y: {
                 min: 0,
-                stacked: true
+                stacked: true,
+                ...(this.formatDuration && {
+                  ticks: {
+                    callback: (value: any) => {
+                      return formatDurationFromSeconds(value);
+                    }
+                  }
+                })
               },
               x: {
                 type: 'time',

package/src/fields/FieldManager.ts

@@ -121,7 +121,7 @@ export class FieldManager extends EndpointMonitorElement {
         border-radius: var(--curvature);
       }
 
-      .featured temba-sortable-list .field:hover {
+      .featured:not(.dragging) temba-sortable-list .field:hover {
         cursor: move;
         border-color: #e6e6e6;
         background: #fcfcfc;
@@ -138,9 +138,6 @@ export class FieldManager extends EndpointMonitorElement {
   @property({ type: Object, attribute: false })
   otherFieldKeys: string[] = [];
 
-  @property({ type: String })
-  draggingId: string;
-
   @property({ type: String })
   query = '';
 
@@ -189,36 +186,31 @@ export class FieldManager extends EndpointMonitorElement {
     }
   }
 
-  private handleSaveOrder(event) {
-    const list = event.currentTarget as SortableList;
-    postJSON(
-      this.priorityEndpoint,
-      list
-        .getIds()
-        .reverse()
-        .reduce((map, key, idx) => {
-          map[key] = idx;
-          return map;
-        }, {})
-    ).then(() => {
-      this.store.refreshFields();
-    });
-  }
-
   private handleOrderChanged(event) {
-    const swapsies = event.detail;
-    const temp = this.featuredFields[swapsies.fromIdx];
-    this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];
-    this.featuredFields[swapsies.toIdx] = temp;
-    this.requestUpdate('featuredFields');
-  }
+    // Apply the reordering immediately - the SortableList now provides accurate indexes
+    const [fromIdx, toIdx] = event.detail.swap;
 
-  private handleDragStart(event) {
-    this.draggingId = event.detail.id;
-  }
+    const temp = this.featuredFields[fromIdx];
+    this.featuredFields.splice(fromIdx, 1);
+    this.featuredFields.splice(toIdx, 0, temp);
+    this.requestUpdate();
 
-  private handleDragStop() {
-    this.draggingId = null;
+    // Save the new order to the server
+    const list = event.currentTarget as SortableList;
+    setTimeout(() => {
+      postJSON(
+        this.priorityEndpoint,
+        list
+          .getIds()
+          .reverse()
+          .reduce((map, key, idx) => {
+            map[key] = idx;
+            return map;
+          }, {})
+      ).then(() => {
+        this.store.refreshFields();
+      });
+    }, 0);
   }
 
   private handleFieldAction(event: MouseEvent) {
@@ -248,10 +240,13 @@ export class FieldManager extends EndpointMonitorElement {
             display: flex; 
             flex-direction: row; 
             align-items: center;
-            padding: 0.25em 1em; 
-            ${field.key === this.draggingId
-          ? 'background: var(--color-selection)'
-          : ''}"
+            padding: 0.25em 1em;"
+        @click=${(e: MouseEvent) => {
+          const ele = e.currentTarget as HTMLDivElement;
+          const key = ele.dataset.key;
+          const action = ele.dataset.action;
+          this.fireCustomEvent(CustomEventType.Selection, { key, action });
+        }}
       >
         <div
           style="display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em"
@@ -327,10 +322,7 @@ export class FieldManager extends EndpointMonitorElement {
                   `
                 : html`
                     <temba-sortable-list
-                      @change=${this.handleSaveOrder}
                       @temba-order-changed=${this.handleOrderChanged}
-                      @temba-drag-start=${this.handleDragStart}
-                      @temba-drag-stop=${this.handleDragStop}
                     >
                       ${this.featuredFields.map((field) =>
                         this.renderField(field)

package/src/list/RunList.ts

@@ -155,8 +155,8 @@ export class RunList extends TembaList {
             style="width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;"
           >
             <temba-contact-name
-              name=${run.contact.name || run.contact.anon_display}
-              urn=${run.contact.urn}
+              name=${run.contact?.name || run.contact?.anon_display || ''}
+              urn=${run.contact?.urn || ''}
               icon-size="15"
             />
           </div>
@@ -255,7 +255,7 @@ export class RunList extends TembaList {
       return null;
     }
 
-    const resultKeys = Object.keys(this.selectedRun.values);
+    const resultKeys = Object.keys(this.selectedRun.values || {});
 
     return html` <div
       style="margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);"
@@ -267,11 +267,12 @@ export class RunList extends TembaList {
           <div>
             <temba-contact-name
               style="cursor:pointer"
-              name=${this.selectedRun.contact.name ||
-              this.selectedRun.contact.anon_display}
-              urn=${this.selectedRun.contact.urn}
+              name=${this.selectedRun.contact?.name ||
+              this.selectedRun.contact?.anon_display ||
+              ''}
+              urn=${this.selectedRun.contact?.urn || ''}
               onclick="goto(event, this)"
-              href="/contact/read/${this.selectedRun.contact.uuid}/"
+              href="/contact/read/${this.selectedRun.contact?.uuid || ''}/"
             ></temba-contact-name>
             <div
               style="display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em"
@@ -303,7 +304,9 @@ export class RunList extends TembaList {
           <div style="flex-grow:1"></div>
           <div style="display:flex;flex-direction: column">
             <div style="font-size:0.75em">
-              ${new Date(this.selectedRun.created_on).toLocaleString()}
+              ${this.selectedRun.created_on
+                ? new Date(this.selectedRun.created_on).toLocaleString()
+                : ''}
             </div>
             <div
               style="font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em"