@aquera/nile-visualization 2.9.5 → 2.9.7

package/dist/src/nile-filter-chart/utils/prompt.js

@@ -264,7 +264,42 @@ function renderModeToggle(host, ctrl, mode) {
     </nile-button-toggle-group>
   `;
 }
+/**
+ * Layout-only global stylesheet for the portaled suggestion menu. The portal
+ * clones the panel into document.body, so component-scoped CSS can't reach
+ * it — these two rules use nile-menu-item's exposed `label` part to grow the
+ * label so the suffix (type pill) sticks to the row's right edge, and style
+ * the pill itself. Idempotent: bails if already injected.
+ */
+const SUGGESTION_LAYOUT_STYLE_ID = 'fc-prompt-suggestion-layout';
+function ensureSuggestionLayoutStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(SUGGESTION_LAYOUT_STYLE_ID))
+        return;
+    const el = document.createElement('style');
+    el.id = SUGGESTION_LAYOUT_STYLE_ID;
+    el.textContent = `
+    .fc-prompt__menu nile-menu-item::part(label) {
+      flex: 1;
+      min-width: 0;
+    }
+    .fc-prompt__suggestion-tag {
+      flex-shrink: 0;
+      padding: 1px 8px;
+      border-radius: 999px;
+      background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+      color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+  `;
+    document.head.appendChild(el);
+}
 export function renderPrompt(host, ctrl) {
+    ensureSuggestionLayoutStyles();
     const value = String(host.selectedValues.get(ctrl.id) ?? '');
     const animated = host.promptPlaceholder.get(ctrl.id) ?? '';
     const error = host.promptErrors.get(ctrl.id);
@@ -608,60 +643,101 @@ export function renderPrompt(host, ctrl) {
         ctrl.noAiBorder ? 'fc-prompt--no-ai-border' : '',
         error ? 'fc-prompt--error' : '',
     ].filter(Boolean).join(' ');
+    const onFocus = () => host.setPromptFocused(ctrl.id, true);
+    // Don't close on blur if focus moved into the suggestion menu (or its
+    // portaled clone) — mousedown on a nile-menu-item momentarily shifts focus
+    // because of the menu's roving tab-index. We let nile-dropdown's own
+    // outside-click / Tab / Escape handlers close the panel.
+    const onBlur = (e) => {
+        const rel = e.relatedTarget;
+        if (rel) {
+            if (rel.closest('nile-menu-item'))
+                return;
+            if (rel.closest('nile-menu'))
+                return;
+            if (rel.closest('nile-dropdown'))
+                return;
+            if (rel.closest('.nile-dropdown-portal-append'))
+                return;
+        }
+        host.setPromptFocused(ctrl.id, false);
+    };
+    const isFocused = host.promptFocusedId === ctrl.id;
+    const dropdownOpen = isFiltrexMode && isFocused && suggestionData.length > 0;
     return html `
     <div class="fc-prompt-row">
       <div class="${classes} fc-prompt--row-input" part="filter-prompt" style="${inlineStyle}">
         <div class="fc-prompt__inner">
-          <div class="fc-prompt__field${isFiltrexMode ? ' fc-prompt__field--highlight' : ''}" part="filter-prompt-field">
-            ${isFiltrexMode ? html `
-              <div class="fc-prompt__highlight" aria-hidden="true">${tokens.map((tok) => {
+          <nile-dropdown
+            class="fc-prompt__dropdown"
+            placement="bottom-start"
+            sync="width"
+            distance="6"
+            hoist
+            portal
+            stay-open-on-select
+            ?open=${dropdownOpen}
+            .noOpenOnClick=${true}
+          >
+            <div
+              slot="trigger"
+              class="fc-prompt__field${isFiltrexMode ? ' fc-prompt__field--highlight' : ''}"
+              part="filter-prompt-field"
+            >
+              ${isFiltrexMode ? html `
+                <div class="fc-prompt__highlight" aria-hidden="true">${tokens.map((tok) => {
         const color = TOKEN_COLOR[tok.type] ?? 'inherit';
         return html `<span style="color:${color};${tok.type === 'keyword' ? 'font-weight:600;' : ''}">${tok.text}</span>`;
     })}</div>
-            ` : nothing}
-            <input
-              type="text"
-              class="fc-prompt__input"
-              id="fc-prompt-${ctrl.id}"
-              name="${ctrl.id}"
-              part="filter-prompt-input"
-              autocomplete="off"
-              spellcheck="false"
-              aria-invalid="${error ? 'true' : 'false'}"
-              placeholder="${animated || (ctrl.placeholders?.[0] ?? '')}"
-              .value="${value}"
-              @input="${onInput}"
-              @keydown="${onKeyDown}"
-              @scroll="${onScroll}"
-            />
-          </div>
-          ${isFiltrexMode && suggestionData.length > 0 ? html `
-            <div class="fc-prompt__suggestions" part="filter-prompt-suggestions">
-              ${suggestionData.map((item, idx) => html `
-                <button
-                  type="button"
-                  class="fc-prompt__suggestion${idx === activeIdx ? ' fc-prompt__suggestion--active' : ''}"
-                  @mouseenter="${() => {
-        if (idx !== activeIdx)
-            host.setPromptActiveIndex(ctrl.id, idx);
-    }}"
-                  @mousedown="${(e) => {
-        // Prevent focus loss on the input so we can update its
-        // value imperatively after the merge.
-        e.preventDefault();
-        const inputEl = e.currentTarget
-            .closest('.fc-prompt__inner')
-            ?.querySelector('input.fc-prompt__input');
+              ` : nothing}
+              <input
+                type="text"
+                class="fc-prompt__input"
+                id="fc-prompt-${ctrl.id}"
+                name="${ctrl.id}"
+                part="filter-prompt-input"
+                autocomplete="off"
+                spellcheck="false"
+                aria-invalid="${error ? 'true' : 'false'}"
+                placeholder="${animated || (ctrl.placeholders?.[0] ?? '')}"
+                .value="${value}"
+                @input="${onInput}"
+                @keydown="${onKeyDown}"
+                @scroll="${onScroll}"
+                @focus="${onFocus}"
+                @blur="${onBlur}"
+              />
+            </div>
+            ${isFiltrexMode && suggestionData.length > 0 ? html `
+              <nile-menu
+                class="fc-prompt__menu"
+                @nile-select="${(e) => {
+        const idx = Number(e.detail?.value);
+        const item = suggestionData[idx];
+        if (!item)
+            return;
+        const inputId = `fc-prompt-${ctrl.id}`;
+        const root = e.currentTarget.getRootNode();
+        const inputEl = (root.querySelector(`#${CSS.escape(inputId)}`)
+            ?? document.getElementById(inputId));
         if (inputEl)
             pickItem(item, inputEl);
     }}"
-                >
-                  <span class="fc-prompt__suggestion-label">${item.label}</span>
-                  ${item.type ? html `<span class="fc-prompt__suggestion-tag">${item.type}</span>` : nothing}
-                </button>
-              `)}
-            </div>
-          ` : nothing}
+              >
+                ${suggestionData.map((item, idx) => html `
+                  <nile-menu-item
+                    class="fc-prompt__suggestion"
+                    part="filter-prompt-suggestion${idx === activeIdx ? ' filter-prompt-suggestion-active' : ''}"
+                    value="${idx}"
+                    ?active="${idx === activeIdx}"
+                  >
+                    ${item.label}
+                    ${item.type ? html `<span slot="suffix" class="fc-prompt__suggestion-tag">${item.type}</span>` : nothing}
+                  </nile-menu-item>
+                `)}
+              </nile-menu>
+            ` : nothing}
+          </nile-dropdown>
           ${showToggle ? renderModeToggle(host, ctrl, mode) : nothing}
         </div>
         ${error ? html `

package/dist/src/nile-filter-chart/utils/types.d.ts

@@ -321,6 +321,8 @@ export interface FilterChartHost {
     readonly promptModes: Map<string, PromptMode>;
     /** Highlighted suggestion index per prompt control id (-1 = none highlighted). */
     readonly promptActiveIndex: Map<string, number>;
+    /** Id of the focused prompt control (drives the suggestion dropdown's open state). */
+    readonly promptFocusedId: string | null;
     setValue(id: string, value: unknown): void;
     emit(name: string, detail?: unknown): void;
     /** Update a prompt's value and (when in NQL mode) re-validate it. */
@@ -331,4 +333,6 @@ export interface FilterChartHost {
     submitPrompt(ctrl: NormalizedFilterControl): void;
     /** Set the highlighted suggestion index. Use -1 to clear the highlight. */
     setPromptActiveIndex(id: string, idx: number): void;
+    /** Mark a prompt control's input as focused / unfocused. */
+    setPromptFocused(id: string, focused: boolean): void;
 }

package/dist/src/nile-kpi-chart/nile-kpi-chart.css.js

@@ -47,14 +47,14 @@ export const styles = css `
     --nile-kpi-label-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     --nile-kpi-label-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     --nile-kpi-label-font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    --nile-kpi-value-font-size: clamp(1rem, 5cqi + 0.25rem, 36px);
+    --nile-kpi-value-font-size: clamp(20px, 9cqmin, 56px);
     --nile-kpi-value-color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     --nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-6, var(--ng-font-size-text-xl));
     --nile-kpi-prefix-suffix-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     --nile-kpi-trend-up-color: var(--nile-colors-success-700, var(--ng-color-success-700));
     --nile-kpi-trend-down-color: var(--nile-colors-error-700, var(--ng-color-error-700));
     --nile-kpi-trend-neutral-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
-    --nile-kpi-description-font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    --nile-kpi-description-font-size: clamp(0.75rem, 1.2cqmin, 1rem);
     --nile-kpi-description-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     display: flex;
     flex-direction: column;
@@ -63,7 +63,8 @@ export const styles = css `
     position: relative;
     box-sizing: border-box;
     overflow: hidden;
-    container-type: inline-size;
+    container-type: size;
+    container-name: kpi-card;
   }
 
   :host([hidden]) {
@@ -120,6 +121,118 @@ export const styles = css `
     overflow: hidden;
   }
 
+  /* ── Adaptive layout: classes set by render() based on what content exists.
+        .kpi--no-chart  — no sparkline and no gauge
+        .kpi--no-desc   — no description
+        Use both together for "value-only" centering. ── */
+  .kpi.kpi--no-chart {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  /* When there is no chart, center value-row vertically in the leftover space
+     below the label, and push the description toward the bottom. With a chart
+     present, items stack from the top naturally (no auto margins). */
+  .kpi--no-chart .kpi-value-row {
+    margin-top: auto;
+  }
+
+  .kpi--no-chart .kpi-description {
+    margin-bottom: auto;
+  }
+
+  /* Reset any grid-only props inherited from the side-by-side rule. */
+  .kpi.kpi--no-chart .kpi-label,
+  .kpi.kpi--no-chart .kpi-value-row,
+  .kpi.kpi--no-chart .kpi-description {
+    grid-column: auto;
+    grid-row: auto;
+  }
+
+  .kpi--no-chart .kpi-label {
+    align-self: flex-start;
+    width: 100%;
+  }
+
+  .kpi--no-chart .kpi-value-row {
+    overflow: hidden;
+    flex-wrap: wrap;
+    row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  /* Center value-row vertically when there's nothing below it (no desc, no chart). */
+  .kpi--no-chart.kpi--no-desc .kpi-value-row {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  /* Grow the value when there's room — no chart AND (no description OR no trend). */
+  .kpi--no-chart.kpi--no-desc,
+  .kpi--no-chart.kpi--no-trend {
+    --nile-kpi-value-font-size: clamp(20px, 9cqmin, 56px);
+  }
+
+  /* When trend is absent, the value sits alone in the row — make sure it
+     centers horizontally and the row sizes to content. */
+  .kpi--no-chart.kpi--no-trend .kpi-value-row {
+    justify-content: center;
+  }
+
+  .kpi--no-chart.kpi--no-trend .kpi-value {
+    text-align: center;
+  }
+
+  .kpi--no-chart .kpi-trend {
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Let the trend text size to its own content when there's no chart. The
+     default flex 1 1 0 (basis 0) gives the trend nearly zero natural width,
+     so the parent row gives it almost no space and the text clips. */
+  .kpi--no-chart .kpi-trend > span:last-child {
+    flex: 0 0 auto;
+  }
+
+  .kpi--no-chart:not(.kpi--no-desc) .kpi-description {
+    margin-bottom: auto;
+    align-self: center;
+    text-align: center;
+  }
+
+
+  /* When the card is narrow, the centered no-chart value can overflow both
+     edges (cut off on the left). Switch to left-aligned at narrow widths so
+     the value's left edge stays visible. */
+  @container (max-width: 160px) {
+    .kpi--no-chart {
+      align-items: stretch;
+    }
+
+    .kpi--no-chart .kpi-value-row {
+      justify-content: flex-start;
+      align-self: stretch;
+      width: 100%;
+    }
+
+    .kpi--no-chart.kpi--no-trend .kpi-value-row {
+      justify-content: flex-start;
+    }
+
+    .kpi--no-chart.kpi--no-trend .kpi-value {
+      text-align: left;
+    }
+  }
+
   .kpi-label {
     display: block;
     margin: 0;
@@ -141,11 +254,24 @@ export const styles = css `
   .kpi-value-row {
     display: flex;
     align-items: center;
+    justify-content: flex-start;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     flex-wrap: nowrap;
+    width: 100%;
+    max-width: 100%;
     min-width: 0;
     overflow: hidden;
     flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  /* When a chart is rendered, force value-row to the left of its column,
+     overriding any centering inherited from the .kpi--no-chart rules. */
+  .kpi:not(.kpi--no-chart) .kpi-value-row {
+    justify-content: flex-start;
+    align-self: stretch;
+    margin-left: 0;
+    margin-right: 0;
   }
 
   .kpi-value {
@@ -157,10 +283,9 @@ export const styles = css `
     line-height: 1.2;
     cursor: default;
     white-space: nowrap;
-    min-width: 0;
-    flex: 0 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    flex: 0 0 auto;
+    flex-shrink: 0;
+    overflow: visible;
   }
 
   .kpi-prefix,
@@ -172,7 +297,7 @@ export const styles = css `
   }
 
   .kpi-trend {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
     padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
@@ -181,10 +306,36 @@ export const styles = css `
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     line-height: 1;
-    flex-shrink: 1;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .kpi-trend-text {
     min-width: 0;
+    min-height: 0;
+    max-width: 100%;
     overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  .kpi-trend > span:last-child {
+    flex: 1 1 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  /* ── When no chart is rendered, the trend has room — don't truncate. ── */
+  .kpi--no-chart .kpi-trend,
+  .kpi--no-chart .kpi-trend > span:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 0;
   }
 
   .kpi-trend--up {
@@ -215,7 +366,9 @@ export const styles = css `
   }
 
   .kpi-description {
-    display: block;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
     margin: 0;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-kpi-description-font-size);
@@ -223,13 +376,19 @@ export const styles = css `
     line-height: 1.5;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-word;
     min-width: 0;
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
-    flex-shrink: 1;
+    flex-shrink: 0;
   }
 
+  /* Description stays visible whenever there's room — sparkline gives up its
+     space first because it has flex-shrink and flex-basis: 0. */
+
+
   .kpi-sparkline {
     width: 100%;
     flex: 1 1 0;
@@ -241,7 +400,7 @@ export const styles = css `
   /* ── Container queries: scale down for narrow cards ── */
 
   /* Medium-small: ~280px and below — tighten padding, shrink prefix/suffix. */
-  @container (max-width: 280px) {
+  @container (max-width: 10px) {
     :host {
       --nile-kpi-padding-v: var(--nile-spacing-lg, var(--ng-spacing-lg));
       --nile-kpi-padding-h: var(--nile-spacing-xl, var(--ng-spacing-xl));
@@ -268,7 +427,9 @@ export const styles = css `
     }
 
     .kpi-sparkline {
-      min-height: 0;
+
+      min-height: 18px;
+
     }
   }
 
@@ -284,6 +445,136 @@ export const styles = css `
     }
   }
 
+
+
+  /* ── Named-container hide thresholds ──────────────────────────────────────
+     Use kpi-card (this host) so descendants hide when the host can't fit them.
+     Tune each height to match where the section first starts clipping. ── */
+
+  /* Hide sparkline (and gauge) when the card can't fit it cleanly. */
+  @container kpi-card (max-height: 10px) {
+    .kpi-sparkline,
+    .kpi-gauge-container {
+      display: none;
+    }
+  }
+
+  /* Hide description when the card is even shorter. */
+  @container kpi-card (max-height: 110px) {
+    .kpi-description {
+      display: none;
+    }
+  }
+
+  /* Hide trend at very small sizes — keeps only label + value. */
+  @container kpi-card (max-height: 20px) {
+    .kpi-trend {
+      display: none;
+    }
+  }
+
+  /* When the host is short, hide the sparkline. Centering of the value-row is
+     restricted to .kpi--no-chart only — with a chart present, items stack from
+     the top of the card naturally. */
+  @container (max-height: 80px) {
+    .kpi-sparkline {
+      display: none;
+    }
+
+    .kpi.kpi--no-chart {
+      align-items: center;
+    }
+
+    .kpi--no-chart .kpi-label {
+      align-self: flex-start;
+      width: 100%;
+    }
+
+    .kpi--no-chart .kpi-value-row {
+      overflow: visible;
+      flex-wrap: wrap;
+      row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+      justify-content: center;
+      align-self: center;
+      width: auto;
+      max-width: 100%;
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+
+  /* SIDE_HEIGHT × SIDE_WIDTH — wide + short, chart on the right of text.
+     Only when a chart is present; otherwise text would be squeezed into the
+     left half while the right half stays empty. */
+  @container (max-height: 108px) and (min-width: 390px) {
+    .kpi:not(.kpi--no-chart) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(1px, 1fr);
+     
+      grid-template-rows: auto auto auto 1fr;
+      column-gap: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+      align-items: start;
+      height: 100%;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-label {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-value-row {
+      grid-column: 1;
+      grid-row: 2;
+      overflow: hidden;
+      min-width: 0;
+      width: 100%;
+      max-width: 100%;
+      justify-content: flex-start;
+      justify-self: stretch;
+      align-self: start;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-description {
+      grid-column: 1;
+      grid-row: 3;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-trend {
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .kpi:not(.kpi--no-chart) .kpi-trend > span:last-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    .kpi-sparkline {
+      display: block;
+      grid-column: 2;
+      grid-row: 1 / -1;
+      align-self: stretch;
+      min-height: 0;
+      height: 100%;
+      margin-top: 0;
+    }
+
+    .kpi-gauge-container {
+      display: block;
+      grid-column: 2;
+      grid-row: 1 / -1;
+      align-self: stretch;
+      min-height: 0;
+      height: 100%;
+      margin-top: 0;
+    }
+  }
+
   /* ── Gauge variant ── */
 
   .kpi--gauge {
@@ -293,11 +584,13 @@ export const styles = css `
 
   .kpi-gauge-container {
     width: 100%;
-    max-width: 160px;
-    aspect-ratio: 1;
-    flex: 0 1 160px;
-    min-width: 72px;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    max-width: 100%;
+    max-height: 100%;
     margin: 0 auto;
+    overflow: hidden;
   }
 
   .kpi--gauge .kpi-value-row {

package/dist/src/nile-kpi-chart/nile-kpi-chart.d.ts

@@ -3,8 +3,8 @@ import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { AqConfigType } from '../internal/types/aq-config.type.js';
 export type TrendDirection = 'up' | 'down' | 'neutral';
-export type KpiVariant = 'default' | 'card' | 'gauge' | 'accent';
-export type SparklineType = 'area' | 'line';
+export type KpiVariant = 'default' | 'card' | 'sparkline' | 'gauge' | 'accent';
+export type SparklineType = 'area' | 'line' | 'column' | 'bar' | 'spline' | 'areaspline' | 'pie' | 'scatter';
 export type KpiValueFormat = 'auto' | 'K' | 'M' | 'B' | 'T' | 'none';
 export type KpiNumberSystem = 'indian' | 'international';
 /** `chart` slice for `<nile-kpi-chart>.config` (discriminated by `type: 'kpi'`). */
@@ -265,6 +265,7 @@ export declare class NileKpiChart extends NileElement {
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;
     private syncSparklineChartSize;
+    private syncGaugeChartSize;
     private setupResizeObserver;
     private _onSparklineMouseMove;
     private _onSparklineMouseLeave;
@@ -279,6 +280,7 @@ export declare class NileKpiChart extends NileElement {
     private _onDescEnter;
     private _onLabelEnter;
     private _onGaugeEnter;
+    private _onTrendEnter;
     private _onTipLeave;
     private renderTrend;
     render(): TemplateResult;