@mozaic-ds/chart 0.1.0-beta.29 → 0.1.0-beta.30

package/src/main.ts

@@ -1,8 +1,15 @@
-import BarChart from "./components/bar/BarChart.vue";
-import DoughnutChart from "./components/doughnut/DoughnutChart.vue";
-import LineChart from "./components/line/LineChart.vue";
-import RadarChart from "./components/radar/RadarChart.vue";
-import MixedBarLineChart from "./components/mixed/MixedBarLineChart.vue";
-import BubbleChart from "./components/bubble/BubbleChart.vue";
+import BarChart from './components/bar/BarChart.vue';
+import DoughnutChart from './components/doughnut/DoughnutChart.vue';
+import LineChart from './components/line/LineChart.vue';
+import RadarChart from './components/radar/RadarChart.vue';
+import MixedBarLineChart from './components/mixed/MixedBarLineChart.vue';
+import BubbleChart from './components/bubble/BubbleChart.vue';
 
-export { BarChart, DoughnutChart, LineChart, RadarChart, MixedBarLineChart, BubbleChart };
+export {
+  BarChart,
+  DoughnutChart,
+  LineChart,
+  RadarChart,
+  MixedBarLineChart,
+  BubbleChart
+};

package/src/plugin.ts

@@ -1,5 +1,5 @@
-import type { App } from "vue";
-import * as Components from "./components";
+import type { App } from 'vue';
+import * as Components from './components';
 
 const MozaicChart = {
   install: (app: App, options: {}) => {
@@ -7,14 +7,14 @@ const MozaicChart = {
       // @ts-ignore
       app.component(name, Components[name]);
     });
-  },
+  }
 };
 
 export default MozaicChart;
 
-export { BarChart } from "./components/bar";
-export { DoughnutChart } from "./components/doughnut";
-export { LineChart } from "./components/line";
-export { RadarChart } from "./components/radar";
-export { MixedBarLineChart } from "./components/mixed";
-export { BubbleChart } from "./components/bubble";
+export { BarChart } from './components/bar';
+export { DoughnutChart } from './components/doughnut';
+export { LineChart } from './components/line';
+export { RadarChart } from './components/radar';
+export { MixedBarLineChart } from './components/mixed';
+export { BubbleChart } from './components/bubble';

package/src/services/BarChartFunctions.ts

@@ -1,50 +1,95 @@
 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';
-import {getVirtualNodeHeight} from 'mermaid/dist/diagrams/timeline/svgDraw';
+import { getVirtualNodeHeight } from 'mermaid/dist/diagrams/timeline/svgDraw';
 
 const { getPatternIndexWithShift } = PatternFunctions();
 
 interface Dataset {
-  data: number[],
-  label: any,
-  stack?: number,
+  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)[]>, enableHoverFeature: Ref<boolean>) {
-    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility,  patternsColors, patternsList, enableHoverFeature);
+  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>
+  ) {
+    return getHtmlLegendPlugin(
+      legendContainer,
+      selectMode,
+      onHoverIndex,
+      disableAccessibility,
+      patternsColors,
+      patternsList,
+      enableHoverFeature
+    );
   }
   // 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, datasetIndex) => {
       return {
         borderColor: function (context: any) {
-          return disableAccessibility ? '#00000000' : getBorderColor(datasetIndex, context.index, patternsColors, patternShifting);
+          return disableAccessibility
+            ? '#00000000'
+            : getBorderColor(
+                datasetIndex,
+                context.index,
+                patternsColors,
+                patternShifting
+              );
         },
         backgroundColor: function (context: any) {
-          return getPattern(datasetIndex, 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,
@@ -53,53 +98,106 @@ export default function () {
     });
   }
 
-  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;
@@ -120,6 +218,6 @@ export default function () {
     privateGetHtmlLegendPlugin,
     getPatternIndexWithShift,
     barChartRef,
-    borderWidth,
+    borderWidth
   };
 }

package/src/services/BubbleTooltipService.ts

@@ -1,65 +1,67 @@
-import {Context, GenericTooltipService} from './GenericTooltipService';
+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';
+  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);
+  fontProperties = 'font-family: Arial; font-size: 16px';
 
-        }
-        this.handleTooltipPosition(context, tooltipModel, tooltipEl);
+  createBubbleTooltip(
+    context: Context,
+    lines: BubbleTooltipLine[],
+    title: string
+  ) {
+    if (!title || title === '') {
+      return;
     }
-
-    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;
+    let tooltipEl = document.querySelector(
+      '#chartjs-tooltip'
+    ) as HTMLElement | null;
+    if (!tooltipEl) {
+      tooltipEl = this.createNewTooltipElement();
     }
-
-    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>`;
+    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>`;
+  }
 }