@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/components/spider-chart/spider-chart.component.stories.ts

@@ -0,0 +1,273 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { SpiderChartComponent } from './spider-chart.component';
+import { transformTheme } from '../../utils/transform-theme';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { NgChartsModule } from 'ng2-charts';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NgClass } from '@angular/common';
+import { SpinnerComponentModule } from '../spinner/spinner.module';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+
+export default {
+  title: 'Charts/Spider',
+  component: SpiderChartComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        UiTranslatePipe,
+        MemoizeFuncPipe,
+        NgChartsModule,
+        MatTooltipModule,
+        NgClass,
+        UiTranslatePipe,
+        SpinnerComponentModule,
+      ],
+      declarations: [SpiderChartComponent],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=13450-11068&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+
+const labelDescription = 'The ability to understand and analyze organizational dynamics and patterns.';
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  spiderChartData: {
+    labels: [
+      'Organizational Insight',
+      'Business Savvy',
+      'Strategic Focus',
+      'Agile Decision-making',
+      'Navigating Complexity',
+      'Customer Focus',
+    ],
+    labelDescription: [
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+    ],
+    plotData: [
+      {
+        databaseLabel: "This candidate's score",
+        data: [32, 43, 77, 90, 100, 77],
+      },
+    ],
+  },
+};
+
+Default.parameters = parameters;
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};
+
+Loading.parameters = parameters;
+
+export const TwoLineTextTruncation = Template.bind({});
+TwoLineTextTruncation.args = {
+  spiderChartData: {
+    labels: [
+      'Organizational Insight with a very very long name',
+      'Business Savvy with a very very long name',
+      'Strategic Focus with a very very long name',
+      'Agile Decision-making with a very very long name',
+      'Navigating Complexity with a very very long name',
+      'Customer Focus with a very very long name',
+    ],
+    labelDescription: [
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+    ],
+    plotData: [
+      {
+        databaseLabel: "This candidate's score",
+        data: [32, 43, 77, 90, 100, 77],
+      },
+    ],
+  },
+};
+
+TwoLineTextTruncation.parameters = parameters;
+
+export const SmallSize = Template.bind({});
+SmallSize.args = {
+  size: 'small',
+  spiderChartData: {
+    labels: [
+      'Organizational Insight',
+      'Business Savvy',
+      'Strategic Focus',
+      'Agile Decision-making',
+      'Navigating Complexity',
+      'Customer Focus',
+    ],
+    labelDescription: [
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+    ],
+    plotData: [
+      {
+        databaseLabel: "This candidate's score",
+        data: [32, 43, 77, 90, 100, 77],
+      },
+    ],
+  },
+};
+
+SmallSize.parameters = parameters;
+
+export const WithSecondaryData = Template.bind({});
+WithSecondaryData.args = {
+  spiderChartData: {
+    labels: [
+      'Organizational Insight',
+      'Business Savvy',
+      'Strategic Focus',
+      'Agile Decision-making',
+      'Navigating Complexity',
+    ],
+    labelDescription: [labelDescription, labelDescription, labelDescription, labelDescription, labelDescription],
+    plotData: [
+      {
+        databaseLabel: "This candidate's score",
+        data: [32, 43, 77, 90, 100],
+      },
+      {
+        databaseLabel: 'Average score',
+        data: [50, 90, 79, 80, 75],
+      },
+    ],
+  },
+};
+
+WithSecondaryData.parameters = parameters;
+
+export const MinimumSides = Template.bind({});
+MinimumSides.args = {
+  spiderChartData: {
+    labels: ['Organizational Insight', 'Business Savvy', 'Strategic Focus'],
+    labelDescription: [labelDescription, labelDescription, labelDescription],
+    plotData: [
+      {
+        databaseLabel: "This candidate's score",
+        data: [32, 50, 32],
+      },
+    ],
+  },
+};
+
+MinimumSides.parameters = parameters;
+
+export const MaximumSides = Template.bind({});
+MaximumSides.args = {
+  spiderChartData: {
+    labels: [
+      'Business Savvy',
+      'Strategic Focus',
+      'Agile Decision-making',
+      'Navigating Complexity',
+      'Customer Focus',
+      'Organizational Insight',
+      'Leadership',
+      'Innovation',
+      'Collaboration',
+      'Communication',
+      'Risk Management',
+      'Change Management',
+    ],
+    labelDescription: [
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+    ],
+    plotData: [
+      {
+        databaseLabel: "This candidate's score",
+        data: [32, 50, 32, 50, 32, 50, 32, 49, 2, 39, 78, 99],
+      },
+    ],
+  },
+};
+
+MaximumSides.parameters = parameters;
+
+export const MaximumSidesWithOneLineTextTruncation = Template.bind({});
+MaximumSidesWithOneLineTextTruncation.args = {
+  spiderChartData: {
+    labels: [
+      'Business Savvy',
+      'Strategic Focus',
+      'Agile Decision-making',
+      'Navigating Complexity',
+      'Customer Focus',
+      'Organizational Insight on the fly',
+      'Leadership on the fly',
+      'Innovation on the fly',
+      'Collaboration on the fly',
+      'Communication on the fly',
+      'Risk Management on the fly',
+      'Change Management on the fly',
+    ],
+    labelDescription: [
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+      labelDescription,
+    ],
+    plotData: [
+      {
+        databaseLabel: "This candidate's score",
+        data: [32, 50, 32, 50, 32, 50, 32, 49, 2, 39, 78, 99],
+      },
+    ],
+  },
+};
+
+MaximumSidesWithOneLineTextTruncation.parameters = parameters;

package/projects/tgo-canopy-ui/components/spider-chart/spider-chart.component.ts

@@ -0,0 +1,442 @@
+import { Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { LargeSpiderChartSize, SmallSpiderChartSize, SpiderChartData, SpiderChartSize } from './spider-chart.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { Chart, ChartData, ChartOptions } from 'chart.js';
+import { Color } from '../../models/colors.model';
+import { BaseChartDirective } from 'ng2-charts';
+
+@Component({
+  selector: 'ui-spider-chart',
+  templateUrl: './spider-chart.component.html',
+  styleUrls: ['./spider-chart.component.scss'],
+})
+export class SpiderChartComponent implements OnInit {
+  /**
+   * The size of the spider chart.
+   * @type {SpiderChartSize}
+   * @memberof SpiderChartComponent
+   */
+  @Input() size: SpiderChartSize = 'large';
+
+  /**
+   * The data to be used for the spider chart.
+   * @type {SpiderChartData}
+   * @memberof SpiderChartComponent
+   */
+  @Input() spiderChartData: SpiderChartData;
+
+  /**
+   * The step size for the spider chart.
+   * @type {number}
+   * @memberof SpiderChartComponent
+   */
+  @Input() stepSize: number = 20;
+
+  /**
+   * The aria label for the spider chart.
+   * @type {string}
+   * @memberof SpiderChartComponent
+   */
+  @Input() ariaLabel: string = 'Radar chart. Press tab to navigate through the chart.';
+
+  /**
+   * Whether the spider chart is loading.
+   * @type {boolean}
+   * @memberof SpiderChartComponent
+   */
+  @Input() loading: boolean = false;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof SpinnerComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  @ViewChild(BaseChartDirective) chart: BaseChartDirective;
+  @ViewChildren('labelContainer') labelContainers: QueryList<ElementRef>;
+  @ViewChildren('fakeDataPoints') fakeDataPoints: QueryList<ElementRef>;
+  @ViewChildren('fakeDataPointsSecondary') fakeDataPointsSecondary: QueryList<ElementRef>;
+  @ViewChildren('legendItem') legendItems: QueryList<ElementRef>;
+
+  radarChartData: ChartData<'radar'> = {
+    labels: [],
+    datasets: [],
+  };
+  radarChartOptions: ChartOptions<'radar'>;
+  labelPositions: { [key: string]: { x: number; y: number } } = {};
+  labelPositionsVisible: boolean = false;
+  focusedLabelIndex: number = 0;
+  focusedFakeDataPointIndex: number = 0;
+  loadingChartData: ChartData<'radar'> = {
+    labels: [1, 2, 3, 4, 5, 6],
+    datasets: [],
+  };
+  loadingChartOptions: ChartOptions<'radar'> = {
+    responsive: true,
+    layout: {
+      padding: {
+        left: 40,
+        right: 40,
+        top: 40,
+        bottom: 40,
+      },
+    },
+    scales: {
+      r: {
+        angleLines: {
+          display: true,
+          color: Color.GRAYSCALE_30,
+        },
+        grid: {
+          color: () => Color.GRAYSCALE_30,
+        },
+        pointLabels: {
+          display: false,
+        },
+        suggestedMin: 0,
+        suggestedMax: 100,
+        ticks: {
+          stepSize: this.stepSize,
+          display: false,
+        },
+      },
+    },
+  };
+  protected readonly translationContext = 'CHARTS.SPIDER.';
+
+  ngOnInit(): void {
+    if (!this.loading) {
+      this.handleInputErrors();
+      this.setChartData();
+      this.setChartOptions();
+    }
+  }
+
+  private handleInputErrors() {
+    if (!this.spiderChartData.labels || this.spiderChartData.labels.length === 0) {
+      throw new Error('The "labels" input is required and cannot be empty.');
+    }
+    if (!this.spiderChartData.labelDescription || this.spiderChartData.labelDescription.length === 0) {
+      throw new Error('The "labelDescription" input is required and cannot be empty.');
+    }
+    if (
+      this.spiderChartData.labelDescription &&
+      this.spiderChartData.labelDescription.length !== this.spiderChartData.labels.length
+    ) {
+      throw new Error('The "labelDescription" input must have the same length as "labels".');
+    }
+    if (!this.spiderChartData.plotData[0].databaseLabel) {
+      throw new Error('The "plotData.databaseLabel" input is required.');
+    }
+    if (!this.spiderChartData.plotData[0].data || this.spiderChartData.plotData[0].data.length === 0) {
+      throw new Error('The "plotData.data" input is required and cannot be empty.');
+    }
+    if (this.spiderChartData.plotData[0].data.length !== this.spiderChartData.labels.length) {
+      throw new Error('The "plotData.data" input must have the same length as "labels".');
+    }
+    if (
+      this.spiderChartData.plotData.length === 2 &&
+      this.spiderChartData.labels.length > 0 &&
+      this.spiderChartData.plotData[1].data &&
+      this.spiderChartData.plotData[1].data.length !== this.spiderChartData.labels.length
+    ) {
+      throw new Error('The "plotData.data" input must have the same length as "labels".');
+    }
+  }
+
+  private setChartData() {
+    const datasets = [];
+    datasets.push({
+      label: this.spiderChartData.plotData[0].databaseLabel,
+      data: this.spiderChartData.plotData[0].data,
+      fill: true,
+      backgroundColor: 'rgba(212, 16, 170, 0.2)',
+      borderColor: Color.BRAND_50,
+      pointBackgroundColor: Color.BRAND_50,
+      pointBorderColor: Color.TGO_WHITE,
+      pointHoverBackgroundColor: Color.TGO_WHITE,
+      pointHoverBorderColor: Color.BRAND_50,
+    });
+    if (this.spiderChartData.plotData.length === 2) {
+      datasets.push({
+        label: this.spiderChartData.plotData[1].databaseLabel,
+        data: this.spiderChartData.plotData[1].data,
+        fill: false,
+        borderColor: Color.BLACK,
+        borderDash: [5, 5],
+        borderWidth: 1,
+        pointBackgroundColor: Color.BLACK,
+        pointBorderColor: Color.TGO_WHITE,
+        pointHoverBackgroundColor: Color.TGO_WHITE,
+        pointHoverBorderColor: Color.BLACK,
+      });
+    }
+    this.radarChartData = {
+      labels: this.spiderChartData.labels,
+      datasets: datasets,
+    };
+  }
+
+  private setChartOptions() {
+    this.radarChartOptions = {
+      responsive: true,
+      elements: {
+        line: {
+          borderWidth: 3,
+        },
+      },
+      layout: {
+        padding: {
+          left: 40,
+          right: 40,
+          top: 40,
+          bottom: 40,
+        },
+      },
+      scales: {
+        r: {
+          angleLines: {
+            display: true,
+            color: Color.BLACK,
+          },
+          grid: {
+            color: context => {
+              if (context.tick.value === 100) {
+                return Color.BLACK;
+              }
+              return Color.GRAYSCALE_30;
+            },
+          },
+          pointLabels: {
+            color: 'black',
+            font: {
+              family: 'Arial',
+              size: 14,
+            },
+            display: false,
+          },
+          suggestedMin: 0,
+          suggestedMax: 100,
+          ticks: {
+            stepSize: this.stepSize,
+            display: false,
+          },
+        },
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+    };
+  }
+
+  ngAfterViewInit(): void {
+    if (this.chart?.chart && !this.loading) {
+      this.logCornerCoordinates(this.chart.chart);
+    }
+  }
+
+  private logCornerCoordinates(chart: Chart) {
+    const scale = chart.scales['r'] as any;
+    const canvasWidth = this.size === 'large' ? LargeSpiderChartSize : SmallSpiderChartSize;
+    const canvasHeight = this.size === 'large' ? LargeSpiderChartSize : SmallSpiderChartSize;
+
+    // Loop through the labels and calculate the percentage coordinates
+    this.spiderChartData.labels.forEach((label, index) => {
+      const position = scale.getPointPositionForValue(index, scale.max);
+
+      // Calculate percentage values relative to the canvas size
+      const xPercent = (position.x / canvasWidth) * 100;
+      const yPercent = ((canvasHeight - position.y) / canvasHeight) * 100; // Inverting the Y-axis
+
+      this.labelPositions[label] = { x: Number(xPercent.toFixed(2)), y: Number(yPercent.toFixed(2)) };
+    });
+    this.labelPositionsVisible = true;
+  }
+
+  getCenteredLabelBottomPosition(label: string, height: number) {
+    const position = this.labelPositions[label];
+    const padding = 7;
+    if (position.x > 50 || position.x < 50) {
+      return `calc(${position.y}% - ${height / 2}px)`;
+    } else if (position.y < 50) {
+      return `calc(${position.y}% - ${height}px - ${padding}px)`;
+    } else {
+      return `calc(${position.y}% + ${padding}px)`;
+    }
+  }
+
+  getCenteredLabelLeftPosition(label: string, width: number) {
+    const position = this.labelPositions[label];
+    const padding = 15;
+    if (position.x === 50) {
+      return `calc(${position.x}% - ${width / 2}px)`;
+    } else if (position.x < 50) {
+      return `calc(${position.x}% - ${width}px - ${padding}px)`;
+    } else {
+      return `calc(${position.x}% + ${padding}px)`;
+    }
+  }
+
+  onLabelKeyDown(event: KeyboardEvent, index: number) {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      this.focusNextLabel(index);
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      this.focusPreviousLabel(index);
+    }
+  }
+
+  private focusNextLabel(index: number) {
+    const nextIndex = index + 1;
+    if (nextIndex < this.labelContainers.length) {
+      this.labelContainers.get(nextIndex)?.nativeElement.focus();
+    } else {
+      this.labelContainers.first?.nativeElement.focus();
+    }
+    this.focusedLabelIndex = nextIndex;
+  }
+
+  private focusPreviousLabel(index: number) {
+    const previousIndex = index - 1;
+    if (previousIndex >= 0) {
+      this.labelContainers.get(previousIndex)?.nativeElement.focus();
+    } else {
+      this.labelContainers.last?.nativeElement.focus();
+    }
+    this.focusedLabelIndex = previousIndex;
+  }
+
+  onLegendItemKeyDown(event: KeyboardEvent, index: number) {
+    if (event.key === 'Enter') {
+      this.toggleDatasetVisibility(index);
+    } else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      this.focusNextLegendItem(index);
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      this.focusPreviousLegendItem(index);
+    }
+  }
+
+  private focusNextLegendItem(index: number) {
+    const nextIndex = index + 1;
+    if (nextIndex < this.legendItems.length) {
+      this.legendItems.get(nextIndex)?.nativeElement.focus();
+    } else {
+      this.legendItems.first?.nativeElement.focus();
+    }
+  }
+
+  private focusPreviousLegendItem(index: number) {
+    const previousIndex = index - 1;
+    if (previousIndex >= 0) {
+      this.legendItems.get(previousIndex)?.nativeElement.focus();
+    } else {
+      this.legendItems.last?.nativeElement.focus();
+    }
+  }
+
+  onFakeDataPointsKeyDown(event: KeyboardEvent, index: number, isSecondary: boolean = false) {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      this.focusNextFakeDataPoint(index, isSecondary);
+      this.showTooltipForDataPoint(index + 1 > this.spiderChartData.labels.length ? 0 : index + 1, isSecondary);
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      this.focusPreviousFakeDataPoint(index, isSecondary);
+      this.showTooltipForDataPoint(index - 1 < 0 ? this.spiderChartData.labels.length - 1 : index - 1, isSecondary);
+    } else if (event.key === 'Tab') {
+      this.resetActiveElement();
+    }
+  }
+
+  private focusNextFakeDataPoint(index: number, isSecondary: boolean = false) {
+    const nextIndex = index + 1;
+    if (nextIndex < this.fakeDataPoints.length) {
+      const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
+      fakeDataPoints.get(nextIndex)?.nativeElement.focus();
+    } else {
+      const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
+      fakeDataPoints.first?.nativeElement.focus();
+    }
+    if (!isSecondary) {
+      this.focusedFakeDataPointIndex = nextIndex;
+    }
+  }
+
+  private focusPreviousFakeDataPoint(index: number, isSecondary: boolean = false) {
+    const previousIndex = index - 1;
+    if (previousIndex >= 0) {
+      const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
+      fakeDataPoints.get(previousIndex)?.nativeElement.focus();
+    } else {
+      const fakeDataPoints = isSecondary ? this.fakeDataPointsSecondary : this.fakeDataPoints;
+      fakeDataPoints.last?.nativeElement.focus();
+    }
+    if (!isSecondary) {
+      this.focusedFakeDataPointIndex = previousIndex;
+    }
+  }
+
+  showTooltipForDataPoint(index: number, isSecondary: boolean = false) {
+    const chartInstance = this.chart?.chart;
+    if (!chartInstance) return;
+    const activeElement = [{ datasetIndex: isSecondary ? 1 : 0, index }];
+    const meta = chartInstance.getDatasetMeta(isSecondary ? 1 : 0);
+    const dataPoint = meta.data[index];
+    const eventPosition = {
+      x: dataPoint.x,
+      y: dataPoint.y,
+    };
+    if (!isSecondary) {
+      this.focusedFakeDataPointIndex = index;
+    }
+
+    chartInstance.tooltip?.setActiveElements(activeElement, eventPosition);
+
+    chartInstance.update();
+  }
+
+  private resetActiveElement() {
+    const chartInstance = this.chart?.chart;
+    if (!chartInstance) return;
+
+    // Clear the active elements to hide the tooltip
+    chartInstance.tooltip?.setActiveElements([], { x: 0, y: 0 });
+
+    chartInstance.update();
+  }
+
+  toggleDatasetVisibility(datasetIndex: number) {
+    const chartInstance = this.chart?.chart;
+    if (!chartInstance) return;
+
+    const dataset = chartInstance.data.datasets[datasetIndex];
+    dataset.hidden = !dataset.hidden;
+    chartInstance.update();
+  }
+
+  isDatasetVisible(datasetIndex: number) {
+    const chartInstance = this.chart?.chart;
+    if (!chartInstance) return;
+    return !chartInstance.data.datasets[datasetIndex].hidden;
+  }
+
+  getFirstLine(label: string): string {
+    const words = label.split(' ');
+    let firstLine = '';
+    for (const word of words) {
+      if ((firstLine + word).length <= 20) {
+        firstLine += (firstLine ? ' ' : '') + word;
+      } else {
+        break;
+      }
+    }
+    return firstLine;
+  }
+
+  getSecondLine(label: string): string {
+    const firstLine = this.getFirstLine(label);
+    return label.substring(firstLine.length).trim();
+  }
+}