Feature/support bin in barchart

lib/AxisMixin.ts

@@ -1,17 +1,17 @@
-import { select } from "d3-selection";
-import { timeFormat } from "d3-time-format";
+import { axisBottom, axisLeft, axisRight, axisTop } from "d3-axis";
 import { format } from "d3-format";
+import { scaleBand, scaleLinear, scaleLog, scaleTime } from "d3-scale";
+import { select } from "d3-selection";
 import {
   utcDay,
   utcHour,
   utcMinute,
+  utcMonth,
   utcSecond,
   utcWeek,
-  utcMonth,
   utcYear,
 } from "d3-time";
-import { axisBottom, axisLeft, axisRight, axisTop } from "d3-axis";
-import { scaleLinear, scaleLog, scaleBand, scaleTime } from "d3-scale";
+import { timeFormat } from "d3-time-format";
 import { z } from "zod";
 
 export const timeIntervalUnitsSchema = z

lib/ColorGenerator.js

@@ -1,4 +1,4 @@
-import { scaleOrdinal, scaleLinear } from "d3";
+import { scaleLinear, scaleOrdinal } from "d3";
 
 export default function getStanzaColors(stanza) {
   /**

lib/Legend2.js

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from "lit";
-import { createRef, ref } from "lit/directives/ref.js";
+import { LitElement, css, html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
 
 export default class Legend2 extends LitElement {
   /**

lib/MetaStanza.ts

@@ -1,13 +1,15 @@
-import Stanza from "togostanza/stanza";
 import { appendCustomCss } from "togostanza-utils";
-import { getMarginsFromCSSString, MarginsI } from "./utils";
 import { Data } from "togostanza-utils/data";
+import Stanza from "togostanza/stanza";
+import { getMarginsFromCSSString, MarginsI } from "./utils";
 
 export default abstract class extends Stanza {
   _data: any;
   __data: Data;
   _main: HTMLElement;
   abstract renderNext(): Promise<void>;
+  _apiError = false;
+  _error: Error;
 
   get MARGIN(): MarginsI {
     return getMarginsFromCSSString(this.css("--togostanza-canvas-padding"));
@@ -24,13 +26,18 @@ export default abstract class extends Stanza {
 
     // To maintain compatibility, we assign values to __data,
     // but in the future we would like to make _data the return value of Data.load itself.
-    this.__data = await Data.load(this.params["data-url"], {
-      type: this.params["data-type"],
-      mainElement: this._main,
-    });
-
-    this._data = this.__data.data;
-
-    await this.renderNext();
+    try {
+      this.__data = await Data.load(this.params["data-url"], {
+        type: this.params["data-type"],
+        mainElement: this._main,
+      });
+      this._data = this.__data.data;
+      this._apiError = false;
+    } catch (error) {
+      this._apiError = true;
+      this._error = error;
+    } finally {
+      await this.renderNext();
+    }
   }
 }

lib/ToolTip.js

@@ -1,5 +1,5 @@
-import { LitElement, html, css } from "lit";
-import { ref, createRef } from "lit/directives/ref.js";
+import { LitElement, css, html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
 
 function isInNodeList(nodeList, node) {
   for (const nodeInList of nodeList.values()) {

lib/apiError.ts

@@ -0,0 +1,145 @@
+import type { BaseType } from "d3";
+import Legend from "./Legend2.js";
+import ToolTip from "./ToolTip.js";
+
+/**
+ * Options for handling API errors in the visualization.
+ * @interface
+ * @property {StanzaData} stanzaData - The data of the current stanza.
+ * @property {() => void} drawContent - A function to draw the content of the stanza.
+ * @property {boolean} [hasLegend] - Indicates whether the legend should be displayed.
+ * @property {boolean} [hasTooltip] - Indicates whether tooltips should be displayed.
+ * @property {LegendOptions} [legendOptions] - Configuration options for the legend.
+ */
+interface HandleApiErrorOptions {
+  stanzaData: StanzaData;
+  drawContent: () => void;
+  hasLegend?: boolean;
+  hasTooltip?: boolean;
+  legendOptions?: LegendOptions;
+}
+
+/**
+ * Represents the data needed to handle an API error.
+ */
+interface StanzaData {
+  _main: HTMLElement;
+  _apiError: boolean;
+  root: ShadowRoot;
+}
+
+/**
+ * Represents an item in the legend.
+ */
+export interface LegendItem {
+  id: string | number;
+  color: string;
+  value: string | number;
+  toggled?: boolean;
+}
+
+/**
+ * Represents the configuration for the legend.
+ */
+interface LegendConfiguration {
+  items: LegendItem[];
+  title: string;
+  options: {
+    fadeoutNodes?: NodeList | BaseType[];
+    shape?: string;
+    fadeProp?: string;
+    position?: string;
+    showLeaders?: boolean;
+  };
+}
+
+/**
+ * Represents the options for displaying the legend.
+ */
+interface LegendOptions {
+  isLegendVisible: boolean;
+  legendConfiguration: LegendConfiguration;
+}
+
+/**
+ * Handles API errors by displaying an error message or rendering the content.
+ * Also manages legend and tooltip based on the configuration.
+ */
+export async function handleApiError(options: HandleApiErrorOptions) {
+  const { stanzaData, drawContent, hasLegend, hasTooltip, legendOptions } =
+    options;
+  const { _main: main, _apiError: apiError, root } = stanzaData;
+  const { isLegendVisible, legendConfiguration } = legendOptions ?? {};
+
+  handleErrorMessage(apiError, main);
+  if (!apiError) {
+    await drawContent();
+  }
+  if (hasLegend) {
+    manageLegend(isLegendVisible, legendConfiguration, root, apiError);
+  }
+  /* TODO hasTooltip should be determined by the data fetched from the data-url.
+  (e.g. const showToolTips = dataset.some((item) => item.description);)
+  The function now can only accept hardcode boolean value */
+  if (hasTooltip) {
+    manageTooltip(main);
+  }
+}
+
+/**
+ * Displays or removes an error message based on the API error status.
+ * @param apiError - Indicates if there is an API error.
+ * @param main - The main HTML element to display the error message.
+ */
+function handleErrorMessage(apiError: boolean, main: HTMLElement) {
+  const errorMessageEl = main.querySelector(".metastanza-error-message-div");
+
+  if (apiError) {
+    if (!errorMessageEl) {
+      const errorMessageDiv = document.createElement("div");
+      errorMessageDiv.className = "metastanza-error-message-div";
+      errorMessageDiv.textContent = "Please fill in the exact data-url";
+      main.appendChild(errorMessageDiv);
+    }
+  } else {
+    errorMessageEl?.remove();
+  }
+}
+
+/**
+ * Manages the display of the legend based on the given parameters.
+ * @param isShow - Determines whether the legend should be displayed.
+ * @param config - The configuration for the legend.
+ * @param root - The root HTML element where the legend will be displayed.
+ * @param apiError - Indicates if there is an API error.
+ */
+function manageLegend(
+  isShow: boolean,
+  config: LegendConfiguration,
+  root: ShadowRoot,
+  apiError: boolean
+) {
+  const legendElement = root.querySelector("togostanza--legend2");
+  if (!isShow || apiError) {
+    legendElement?.remove();
+  } else if (!legendElement) {
+    const legend = new Legend();
+    root.append(legend);
+    legend.setup(config);
+  }
+}
+
+/**
+ * Manages the tooltip by removing any existing tooltip and creating a new one if necessary.
+ * @param main - The main HTML element where the tooltip will be displayed.
+ */
+function manageTooltip(main: HTMLElement) {
+  const tooltipElement = main.querySelector("togostanza--tooltip");
+  if (!tooltipElement) {
+    const tooltip = new ToolTip();
+    main.append(tooltip);
+    tooltip.setup(main.querySelectorAll("[data-tooltip]"));
+  } else {
+    tooltipElement.remove();
+  }
+}

lib/utils.d.ts

@@ -6,3 +6,27 @@ interface MarginsI {
 }
 
 export function getMarginsFromCSSString(cssString: string): MarginsI;
+
+export function toggleSelectIds({ targetId, selectedIds }): void;
+
+export function emitSelectedEvent({
+  rootElement = undefined,
+  targetId,
+  selectedIds,
+  dataUrl,
+}): void;
+
+export function updateSelectedElementClassNameForD3({
+  drawing,
+  selectedIds,
+  targetElementSelector,
+  selectedElementClassName,
+  idPath,
+}): void;
+
+export function selectElement({
+  stanza,
+  selectedIds,
+  targetElementSelector,
+  idPrefix,
+}): void;

lib/utils.js

@@ -1,5 +1,7 @@
 import axios from "axios";
 import camelCase from "lodash.camelcase";
+import get from "lodash.get";
+
 /** Cached axios */
 export class cachedAxios {
   /**
@@ -143,3 +145,52 @@ export function checkIfHexColor(text) {
   const regex = /^#(?:[0-9a-f]{3}){1,2}$/i;
   return regex.test(text);
 }
+
+export function toggleSelectIds({ selectedIds, targetId }) {
+  !selectedIds.includes(targetId)
+    ? selectedIds.push(targetId)
+    : selectedIds.splice(selectedIds.indexOf(targetId), 1);
+}
+export function emitSelectedEvent({
+  rootElement = undefined,
+  selectedIds,
+  targetId,
+  dataUrl,
+}) {
+  rootElement.dispatchEvent(
+    new CustomEvent("changeSelectedNodes", {
+      detail: { targetId, selectedIds, dataUrl },
+    })
+  );
+}
+
+export function updateSelectedElementClassNameForD3({
+  drawing,
+  selectedIds,
+  targetElementSelector,
+  selectedElementClassName,
+  idPath,
+}) {
+  drawing
+    .selectAll(targetElementSelector)
+    .classed(selectedElementClassName, (d) => {
+      const targetId = get(d, idPath);
+      return selectedIds.indexOf(targetId) !== -1;
+    });
+}
+
+// TODO update utils.d.ts and JSDoc
+
+export function displayApiError(element, error) {
+  const htmlString = `
+  <div class="metastanza-error-message-div">
+    <p class="metastanza-error-message">
+      <span>MetaStanza API error</span>
+      <br>
+      <span>${error.name}: ${error.message}</span>
+    </p>
+  </div>
+`;
+
+  element.insertAdjacentHTML("beforeend", htmlString);
+}