@hestia-earth/ui-components 0.36.12 → 0.36.13

package/fesm2022/hestia-earth-ui-components.mjs

@@ -651,6 +651,7 @@ const line = (ctx, startX, endX, y, color, lineWidth) => {
 };
 const defaultLollipopSettings = {
     circleRadius: 4,
+    drawStart: false,
     colorFn: m => m.backgroundColor,
     isMouseInsideLollipopFn: () => null
 };
@@ -659,7 +660,7 @@ const lollipopChartPlugin = settings => ({
         if (!chart.data.datasets?.length) {
             return;
         }
-        const { circleRadius, lineWidth, colorFn, isMouseInsideLollipopFn } = {
+        const { circleRadius, lineWidth, drawStart, colorFn, isMouseInsideLollipopFn } = {
             ...defaultLollipopSettings,
             ...(settings ?? {})
         };
@@ -680,7 +681,7 @@ const lollipopChartPlugin = settings => ({
                 clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x, y }, circleRadius));
                 clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: base, y }, circleRadius));
                 circle(ctx, base, y, color, circleRadius);
-                if (base !== x) {
+                if (base !== x && drawStart) {
                     lineWidth && line(ctx, base, x, y, color, lineWidth);
                     circle(ctx, x, y, color, circleRadius);
                 }
@@ -7910,18 +7911,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                     ], template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  @if (node().distribution?.length) {\n    <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n      <b>distribution</b>\n    </a>\n    <span class=\"pr-2\">:</span>\n    <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], nodeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeType", required: true }] }], dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: true }] }] } });
 
-const isValidDate = (date = '') => date.trim().length === 10;
+const isValidDate = (date) => (date || '').trim().length === 10;
 const dateRange = (startDate, endDate) => {
     const start = formatDate(startDate, true);
     const end = formatDate(endDate, true);
     return (start.getTime() === end.getTime() ? [start, end] : [start, end]);
 };
+const blankNodeStartDate = (blankNode) => blankNode.startDate || (blankNode.dates?.length > 1 ? blankNode.dates[0] : null);
 const blankNodeData = (blankNode = {}) => {
-    const startDate = blankNode.startDate || (blankNode.dates?.length > 1 ? blankNode.dates[0] : null);
     const endDate = blankNode.endDate || blankNode.dates?.pop();
-    const hasStartDate = isValidDate(startDate || '');
-    const hasEndDate = isValidDate(endDate || '');
-    return hasStartDate && hasEndDate ? dateRange(startDate, endDate) : hasEndDate ? dateRange(endDate, endDate) : null;
+    const startDate = blankNodeStartDate(blankNode) || endDate;
+    return isValidDate(startDate) && isValidDate(endDate) ? dateRange(startDate, endDate) : null;
 };
 const colour = '#4c7194';
 class CyclesNodesTimelineComponent {
@@ -7956,6 +7956,7 @@ class CyclesNodesTimelineComponent {
                 lollipopChartPlugin({
                     circleRadius: 6,
                     lineWidth: 2,
+                    drawStart: true,
                     colorFn: () => colour
                 }),
                 afterBarDrawPlugin({