@mozaic-ds/chart 0.1.0-beta.4 → 0.1.0-beta.40

package/src/services/BarChartFunctions.ts

@@ -1,102 +1,206 @@
 import { reactive, ref } from 'vue';
 import type { Ref } from 'vue';
-import {
-  getHtmlLegendPlugin
-} from './ChartsCommonLegend';
+import { getHtmlLegendPlugin } from './ChartsCommonLegend';
 import PatternFunctions from './PatternFunctions';
 import { addAlpha } from './ColorFunctions';
 
 const { getPatternIndexWithShift } = PatternFunctions();
 
 interface Dataset {
-  data: any,
-  label: any,
+  data: number[];
+  label: any;
+  stack?: number;
 }
 
 export default function () {
   const borderWidth = ref(3);
   const barChartRef = ref(null as any);
-  const onHoverIndex: { dataSetIndex: number, columnIndex: number } = reactive({
+  const onHoverIndex: { dataSetIndex: number; columnIndex: number } = reactive({
     dataSetIndex: -1,
     columnIndex: -1
   });
 
-
-  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>) {
-    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility, patternsColors, patternsList);
+  function privateGetHtmlLegendPlugin(
+    legendContainer: Ref,
+    selectMode: Ref<boolean>,
+    disableAccessibility: Ref<boolean>,
+    patternsColors: Ref<string[]>,
+    patternsList: Ref<
+      ((
+        hover: boolean,
+        color: string,
+        disableAccessibility: boolean
+      ) => CanvasPattern)[]
+    >,
+    enableHoverFeature: Ref<boolean>,
+    disableLegendClick: Ref<boolean>
+  ) {
+    return getHtmlLegendPlugin(
+      legendContainer,
+      selectMode,
+      onHoverIndex,
+      disableAccessibility,
+      patternsColors,
+      patternsList,
+      enableHoverFeature,
+      undefined,
+      null,
+      disableLegendClick
+    );
   }
   // Hack to force the chart to reload on Hover
-  function reloadChart () {
+  function reloadChart() {
     borderWidth.value = 4;
     borderWidth.value = 3;
   }
 
-  function getStackedDatasets (datasets: Dataset[], stackDatasets: boolean, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], patternShifting?: number) {
+  function getStackedDatasets(
+    datasets: Dataset[],
+    stackDatasets: boolean,
+    disableAccessibility: boolean,
+    patternsColors: string[],
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
+    patternShifting?: number
+  ) {
     // Hack to force refresh
     const borderWithValue = borderWidth.value;
-    return datasets.map((dataset, index) => {
+    return datasets.map((dataset, datasetIndex) => {
       return {
         borderColor: function (context: any) {
-          return disableAccessibility ? '#00000000' : getBorderColor(index, context.index, patternsColors, patternShifting);
+          return disableAccessibility
+            ? '#00000000'
+            : getBorderColor(
+                datasetIndex,
+                context.index,
+                patternsColors,
+                patternShifting
+              );
         },
         backgroundColor: function (context: any) {
-          return getPattern(index, context.index, disableAccessibility, patternsColors, patternsList, patternShifting);
+          return getPattern(
+            datasetIndex,
+            context.index,
+            disableAccessibility,
+            patternsColors,
+            patternsList,
+            patternShifting
+          );
+        },
+        borderWidth: function () {
+          return disableAccessibility ? 1 : borderWithValue;
         },
-        borderWidth: function () {return disableAccessibility ? 1 : borderWithValue},
+
         data: dataset.data,
         label: dataset.label,
-        stack: `Stack ${stackDatasets ? '0' : index}`
+        stack: `Stack ${stackDatasets ? dataset.stack : datasetIndex}`
       };
     });
   }
 
-  function getDatasets (firstDataSet: Dataset, secondDataSet: Dataset,  patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean) {
-    return getStackedDatasets([firstDataSet, secondDataSet], false, disableAccessibility, patternsColors, patternsList);
+  function getDatasets(
+    firstDataSet: Dataset,
+    secondDataSet: Dataset,
+    patternsColors: string[],
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
+    disableAccessibility: boolean
+  ) {
+    return getStackedDatasets(
+      [firstDataSet, secondDataSet],
+      false,
+      disableAccessibility,
+      patternsColors,
+      patternsList
+    );
   }
 
-  function getBorderColor (dataSetIndex: number, contextIndex: number, patternsColors: string[], patternShifting?: number) {
+  function getBorderColor(
+    dataSetIndex: number,
+    contextIndex: number,
+    patternsColors: string[],
+    patternShifting?: number
+  ) {
     const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
     if (displayFullOpacity(dataSetIndex, contextIndex)) {
       return patternsColors[index];
     } else {
-      return addAlpha(patternsColors[index],0.2);
+      return addAlpha(patternsColors[index], 0.2);
     }
   }
 
-  function getPattern (dataSetIndex: number, contextIndex: number, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], patternShifting?: number) {
+  function getPattern(
+    dataSetIndex: number,
+    contextIndex: number,
+    disableAccessibility: boolean,
+    patternsColors: string[],
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
+    patternShifting?: number
+  ) {
     const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
     if (displayFullOpacity(dataSetIndex, contextIndex)) {
-      return patternsList[index](false, patternsColors[index], disableAccessibility);
+      return patternsList[index](
+        false,
+        patternsColors[index],
+        disableAccessibility
+      );
     } else {
-      return patternsList[index](true, patternsColors[index], disableAccessibility);
+      return patternsList[index](
+        true,
+        patternsColors[index],
+        disableAccessibility
+      );
     }
   }
 
-  function nothingHovered (): boolean {
+  function nothingHovered(): boolean {
     return onHoverIndex.dataSetIndex < 0;
   }
 
-  function columnHovered (dataSetIndex: number, contextIndex: number): boolean {
-    return onHoverIndex.dataSetIndex === dataSetIndex && onHoverIndex.columnIndex === contextIndex;
+  function columnHovered(dataSetIndex: number, contextIndex: number): boolean {
+    return (
+      onHoverIndex.dataSetIndex === dataSetIndex &&
+      onHoverIndex.columnIndex === contextIndex
+    );
   }
 
-  function legendHovered (dataSetIndex: number): boolean {
-    return onHoverIndex.dataSetIndex === dataSetIndex && onHoverIndex.columnIndex < 0;
+  function legendHovered(dataSetIndex: number): boolean {
+    return (
+      onHoverIndex.dataSetIndex === dataSetIndex && onHoverIndex.columnIndex < 0
+    );
   }
 
-  function displayFullOpacity (dataSetIndex: number, contextIndex: number): boolean {
-    return nothingHovered() ||
+  function displayFullOpacity(
+    dataSetIndex: number,
+    contextIndex: number
+  ): boolean {
+    return (
+      nothingHovered() ||
       columnHovered(dataSetIndex, contextIndex) ||
-      legendHovered(dataSetIndex);
+      legendHovered(dataSetIndex)
+    );
   }
 
-  function resetOnHoverIndex () {
+  function resetOnHoverIndex() {
     onHoverIndex.dataSetIndex = -1;
     onHoverIndex.columnIndex = -1;
   }
 
-  function getOnHoverOptions () {
-    return (_ignore: unknown, activeElements: Array<{ index: number, datasetIndex: number }>) => {
+  function getOnHoverOptions() {
+    return (
+      _ignore: unknown,
+      activeElements: Array<{ index: number; datasetIndex: number }>
+    ) => {
       if (activeElements[0] !== undefined) {
         onHoverIndex.dataSetIndex = activeElements[0].datasetIndex;
         onHoverIndex.columnIndex = activeElements[0].index;
@@ -117,6 +221,6 @@ export default function () {
     privateGetHtmlLegendPlugin,
     getPatternIndexWithShift,
     barChartRef,
-    borderWidth,
+    borderWidth
   };
 }

package/src/services/BubbleTooltipService.ts

@@ -0,0 +1,67 @@
+import { Context, GenericTooltipService } from './GenericTooltipService';
+
+export type BubbleTooltipLine = {
+  label: string;
+  value: string;
+  unit: string;
+};
+const tooltipLineStyle =
+  'background: white; border-bottom: 1px solid #CCCCCC; border-radius: 5px; padding: 10px 20px';
+
+export class BubbleTooltipService extends GenericTooltipService {
+  fontProperties = 'font-family: Arial; font-size: 16px';
+
+  createBubbleTooltip(
+    context: Context,
+    lines: BubbleTooltipLine[],
+    title: string
+  ) {
+    if (!title || title === '') {
+      return;
+    }
+    let tooltipEl = document.querySelector(
+      '#chartjs-tooltip'
+    ) as HTMLElement | null;
+    if (!tooltipEl) {
+      tooltipEl = this.createNewTooltipElement();
+    }
+    const tooltipModel = context.tooltip;
+    if (tooltipModel.opacity === 0) {
+      tooltipEl.style.opacity = '0';
+      return;
+    }
+    if (tooltipModel.body) {
+      this.titleLines = tooltipModel.title || [];
+      const bodyLines = tooltipModel.body.map(this.getBody);
+      const body = bodyLines[0];
+      this.addBubbleLegendToDom(lines, body, tooltipEl, title);
+    }
+    this.handleTooltipPosition(context, tooltipModel, tooltipEl);
+  }
+
+  addBubbleLegendToDom(
+    lines: BubbleTooltipLine[],
+    body: Array<string>,
+    tooltipEl: HTMLElement,
+    title: string
+  ) {
+    const legendText = body[0].split(':')[0];
+    const spanText = `<span style="${this.fontProperties}">${title}</span>`;
+    let innerHtml = `<div style="${tooltipLineStyle}; font-weight: bold" class="tooltipTitle">${spanText}</div>`;
+    const innerHtmlToAdd = this.getBubbleInnerHtml(lines);
+    innerHtml += innerHtmlToAdd;
+    const tableRoot = tooltipEl?.querySelector('.tooltipCtn') as HTMLElement;
+    tableRoot.innerHTML = innerHtml;
+  }
+
+  getBubbleInnerHtml(lines: BubbleTooltipLine[]): string {
+    let innerLinesHtml = '';
+    lines.forEach((line) => {
+      innerLinesHtml += `<div style="${this.fontProperties}; ${tooltipLineStyle}; display:flex; justify-content: space-between;">`;
+      innerLinesHtml += `<div>${line.label}</div>`;
+      innerLinesHtml += `<div>${line.value} ${line.unit}</div>`;
+      innerLinesHtml += `</div>`;
+    });
+    return `<div>${innerLinesHtml}</div>`;
+  }
+}