@kirbydesign/designsystem 0.0.0

package/src/lib/components/chart/configs/chart-config.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { ChartType as ChartJSType } from 'chart.js';
+import { AnnotationType, AnnotationTypeRegistry } from 'chartjs-plugin-annotation';
+
+import { deepCopy } from '../../../helpers/deep-copy';
+import { ChartType, ChartTypeConfig } from '../chart.types';
+
+import { CHART_ANNOTATIONS_CONFIG } from './annotations.config';
+import { CHART_INTERACTION_FUNCTIONS_EXTENSIONS } from './interaction-functions-extensions.config';
+import { CHART_TYPES_CONFIG } from './type.config';
+
+@Injectable()
+export class ChartConfigService {
+  public getTypeConfig(chartType: ChartType): ChartTypeConfig {
+    /* Deep copy to avoid Chart object modifying parts of CHART_TYPES_CONFIG 
+    as it copies by reference when initialized */
+    return deepCopy(CHART_TYPES_CONFIG[chartType]);
+  }
+
+  public getAnnotationDefaults(type: AnnotationType): AnnotationTypeRegistry[AnnotationType] {
+    return CHART_ANNOTATIONS_CONFIG[type];
+  }
+
+  public getInteractionFunctionsExtensions() {
+    return CHART_INTERACTION_FUNCTIONS_EXTENSIONS;
+  }
+
+  /* Our types does not always map 1 to 1 to the same type 
+  that the chart.js chart is actually oconfigured with. Therefore this function 
+  for looking up the ChartJSType of a type.  */
+  public chartTypeToChartJSType(chartType: ChartType): ChartJSType {
+    return CHART_TYPES_CONFIG[chartType]['type'] as ChartJSType;
+  }
+}

package/src/lib/components/chart/configs/global-defaults.config.ts

@@ -0,0 +1,50 @@
+import { ColorHelper } from '../../../helpers';
+
+import { scriptedBackgroundColor, scriptedHoverBackgroundColor } from './shared.utils';
+
+const { getThemeColorHexString } = ColorHelper;
+
+export const CHART_GLOBAL_DEFAULTS = {
+  maintainAspectRatio: false,
+  color: getThemeColorHexString('black'),
+  resizeDelay: 10,
+  elements: {
+    bar: {
+      backgroundColor: scriptedBackgroundColor,
+      hoverBackgroundColor: scriptedHoverBackgroundColor,
+    },
+    line: {
+      borderColor: scriptedBackgroundColor,
+      borderWidth: 2,
+      tension: 0.3,
+    },
+  },
+  scales: {
+    linear: {
+      display: false,
+      ticks: {
+        display: false,
+      },
+    },
+    category: {
+      display: true,
+      grid: {
+        display: false,
+      },
+    },
+  },
+  font: {
+    family: 'Roboto',
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+    datalabels: {
+      display: false,
+    },
+    tooltip: {
+      enabled: false,
+    },
+  },
+};

package/src/lib/components/chart/configs/interaction-functions-extensions.config.ts

@@ -0,0 +1,19 @@
+import { ActiveElement, Chart, ChartEvent, ChartOptions } from 'chart.js';
+
+/* Allows for adding functionality to interactions chart.js while 
+preserving the interaction functionality the consumer of the component has 
+passed by being provided as a callback. */
+export const CHART_INTERACTION_FUNCTIONS_EXTENSIONS = {
+  onHover: (
+    _event: ChartEvent,
+    activeElements: ActiveElement[],
+    _chart: Chart,
+    callback: ChartOptions['onHover']
+  ) => {
+    if (_chart.options.onClick) {
+      _chart.canvas.style.cursor = activeElements[0] ? 'pointer' : 'default';
+    }
+
+    if (callback) callback(_event, activeElements, _chart);
+  },
+};

package/src/lib/components/chart/configs/shared.utils.ts

@@ -0,0 +1,28 @@
+import { ChartType, ScriptableContext } from 'chart.js';
+
+import { ColorHelper } from '../../../helpers';
+import { ChartDataset } from '../chart.types';
+
+const { getThemeColorHexString } = ColorHelper;
+
+export const hoverBackgroundColor = getThemeColorHexString('primary');
+export const backgroundColor = getThemeColorHexString('secondary');
+
+// Highlight elements that are added to the highlightedElements array
+export function scriptedBackgroundColor(context: ScriptableContext<ChartType>) {
+  const dataset = context.dataset as ChartDataset;
+  const highlightedElements = dataset?.kirbyOptions?.highlightedElements;
+
+  if (highlightedElements && highlightedElements.includes(context.dataIndex)) {
+    return hoverBackgroundColor;
+  } else {
+    return backgroundColor;
+  }
+}
+
+// Only adds a hovercolor if an onClick handler is provided
+export function scriptedHoverBackgroundColor(context: ScriptableContext<ChartType>) {
+  if (context.chart.options.onClick) {
+    return hoverBackgroundColor;
+  }
+}

package/src/lib/components/chart/configs/type.config.ts

@@ -0,0 +1,214 @@
+import { ChartTypeRegistry, Color, Point, TooltipItem, TooltipLabelStyle } from 'chart.js';
+import { Context } from 'chartjs-plugin-datalabels';
+import { Align } from 'chartjs-plugin-datalabels/types/options';
+
+import { ColorHelper, DesignTokenHelper } from '../../../helpers';
+import { ChartTypesConfig } from '../chart.types';
+
+const { fontSize } = DesignTokenHelper;
+const { getThemeColorHexString, getThemeColorRgbString } = ColorHelper;
+
+/**
+ * A filter to read a chartpoint from a Chart.js point context (used for chartdata points). Context is provided by Chart.js.
+ */
+const getChartPointFromContext = (context: Context): Point => {
+  return context.dataset.data[context.dataIndex] as Point;
+};
+
+export const CHART_TYPES_CONFIG: ChartTypesConfig = {
+  bar: {
+    type: 'bar',
+    options: {
+      datasets: {
+        bar: {
+          barPercentage: 0.6,
+        },
+        line: {
+          spanGaps: true,
+        },
+      },
+      indexAxis: 'y',
+      scales: {
+        y: {
+          grid: {
+            drawBorder: false,
+          },
+          ticks: {
+            font: {
+              size: parseInt(fontSize('s')),
+            },
+          },
+        },
+      },
+      elements: {
+        point: {
+          radius: 0,
+        },
+        line: {
+          borderColor: getThemeColorHexString('medium'),
+        },
+      },
+    },
+  },
+  column: {
+    type: 'bar',
+    options: {
+      datasets: {
+        bar: {
+          barPercentage: 0.6,
+        },
+        line: {
+          spanGaps: true,
+        },
+      },
+      indexAxis: 'x',
+      scales: {
+        x: {
+          grid: {
+            drawBorder: false,
+          },
+          ticks: {
+            font: {
+              size: parseInt(fontSize('xs')),
+            },
+          },
+        },
+      },
+      elements: {
+        line: {
+          tension: 0.2,
+          borderColor: getThemeColorHexString('medium'),
+        },
+        point: {
+          radius: 0,
+        },
+      },
+    },
+  },
+  line: {
+    type: 'line',
+    options: {
+      backgroundColor: getThemeColorRgbString('semi-light', 0.5),
+      scales: {
+        x: {
+          grid: {
+            borderColor: getThemeColorHexString('medium'),
+            borderWidth: 1,
+          },
+          ticks: {
+            font: {
+              size: parseInt(fontSize('xs')),
+            },
+          },
+        },
+      },
+      elements: {
+        point: {
+          radius: 0,
+        },
+      },
+    },
+  },
+  stock: {
+    type: 'line',
+    options: {
+      responsive: true,
+      animation: {
+        duration: 0,
+      },
+      layout: {
+        padding: {
+          left: 20,
+          right: 20,
+          top: 30,
+          bottom: 0,
+        },
+      },
+      backgroundColor: getThemeColorRgbString('semi-light', 0.5),
+      scales: {
+        x: {
+          grid: {
+            lineWidth: 0,
+          },
+          ticks: {
+            maxRotation: 0,
+            autoSkipPadding: 120,
+            font: {
+              size: parseInt(fontSize('xs')),
+            },
+          },
+        },
+        y: {
+          position: 'right',
+          display: true,
+          grid: {
+            drawBorder: false,
+          },
+          ticks: {
+            display: true,
+            font: {
+              size: parseInt(fontSize('xs')),
+            },
+          },
+        },
+      },
+      elements: {
+        line: {
+          tension: 0, // Smooth curve (0 = no smoothing)
+          borderWidth: 2,
+        },
+        point: {
+          hitRadius: 20,
+          radius: 0,
+          hoverRadius: 0,
+          hoverBorderWidth: 0,
+        },
+      },
+      normalized: true,
+      plugins: {
+        tooltip: {
+          padding: 10,
+
+          enabled: true,
+          mode: 'index',
+          intersect: false,
+          backgroundColor: getThemeColorHexString('semi-light'),
+          titleColor: getThemeColorHexString('semi-light-contrast'),
+          bodyColor: getThemeColorHexString('semi-light-contrast'),
+          caretSize: 0,
+          bodySpacing: 5,
+          titleSpacing: 5,
+          borderColor: 'transparent',
+          callbacks: {
+            labelColor: (tooltipItem: TooltipItem<keyof ChartTypeRegistry>) => {
+              return {
+                backgroundColor: tooltipItem.dataset.borderColor,
+              } as TooltipLabelStyle;
+            },
+          },
+        },
+        datalabels: {
+          backgroundColor: (context: Context) => context.dataset.borderColor as Color,
+          color: getThemeColorHexString('white'),
+          borderRadius: 3,
+          font: {
+            lineHeight: 1,
+            size: parseInt(fontSize('xs')),
+          },
+          padding: {
+            top: 6,
+            left: 5,
+            right: 5,
+            bottom: 5,
+          },
+          offset: 5,
+          align: (context: Context): Align =>
+            (getChartPointFromContext(context) as any)?.datalabel.position,
+          display: (context: Context): boolean =>
+            !!(getChartPointFromContext(context) as any)?.datalabel,
+          formatter: (value: any): string => value.datalabel.value,
+        },
+      },
+    },
+  },
+};

package/src/lib/components/chart/index.ts

@@ -0,0 +1,5 @@
+export * from './chart.types';
+export { ChartComponent } from './chart.component';
+export { ChartOptions, ChartEvent, ActiveElement, Chart } from 'chart.js';
+export { AnnotationOptions } from 'chartjs-plugin-annotation';
+export { ChartModule } from './chart.module';

package/src/lib/components/chart-deprecated/chart-deprecated-helper.ts

@@ -0,0 +1,25 @@
+import { ElementRef, Injectable } from '@angular/core';
+import { chart, Options } from 'highcharts';
+import * as Highcharts from 'highcharts';
+
+// Docs on importing accessibility: https://www.highcharts.com/docs/chart-concepts/accessibility
+
+declare var require: any;
+require('highcharts/highcharts-more')(Highcharts);
+require('highcharts/modules/solid-gauge')(Highcharts);
+require('highcharts/modules/broken-axis')(Highcharts);
+
+@Injectable()
+export class ChartDeprecatedHelper {
+  chartContainer: ElementRef;
+
+  public init(chartContainer: ElementRef) {
+    this.chartContainer = chartContainer;
+  }
+
+  public renderChart(options: Options) {
+    if (this.chartContainer && options.chart) {
+      chart(this.chartContainer.nativeElement, options);
+    }
+  }
+}

package/src/lib/components/chart-deprecated/chart-deprecated-type.ts

@@ -0,0 +1,10 @@
+export enum ChartDeprecatedType {
+  PIE = 'pie',
+  DONUT = 'donut',
+  AREASPLINE = 'areaspline',
+  TIMESERIES = 'timeseries',
+  ACTIVITYGAUGE = 'activitygauge',
+  BAR = 'bar',
+  COLUMN = 'column',
+  CUSTOM = 'custom',
+}

package/src/lib/components/chart-deprecated/chart-deprecated.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/src/lib/components/chart-deprecated/chart-deprecated.component.spec.ts

@@ -0,0 +1,271 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { Options, PlotSeriesDataLabelsOptions, XAxisOptions } from 'highcharts';
+
+import { ChartDeprecatedType } from './chart-deprecated-type';
+import { ChartDeprecatedComponent } from './chart-deprecated.component';
+
+describe('ChartDeprecatedComponent', () => {
+  let component: ChartDeprecatedComponent;
+  let fixture: ComponentFixture<ChartDeprecatedComponent>;
+
+  const expectedDefaultHeight = 300;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ChartDeprecatedComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartDeprecatedComponent);
+    component = fixture.componentInstance;
+    component.data = [];
+    component.ngOnChanges({ type: {} as any });
+    fixture.detectChanges();
+  });
+
+  it('should have correct default height input', () => {
+    expect(component.height).toBe(expectedDefaultHeight);
+  });
+
+  it('should set correct default chart height', () => {
+    expect(component.mergedOptions.chart.height).toBe(expectedDefaultHeight);
+  });
+
+  it('should set correct non-default chart height', () => {
+    const expectedHeight = 400;
+    component.height = expectedHeight;
+    component.ngOnChanges({ type: {} as any });
+    fixture.detectChanges();
+    expect(component.mergedOptions.chart.height).toBe(expectedHeight);
+  });
+
+  it('should have correct default chart type', () => {
+    expect((component.type = ChartDeprecatedType.PIE));
+    component.ngOnChanges({ type: {} as any });
+
+    expect(component.mergedOptions.chart.type).toBe(ChartDeprecatedType.PIE);
+    expect(component.mergedOptions.plotOptions.pie.innerSize).toBe('0%');
+  });
+
+  it('should convert donut chart type to highcharts pie with 50% innerSize', () => {
+    component.type = ChartDeprecatedType.DONUT;
+    component.ngOnChanges({ type: {} as any });
+
+    expect((component.type = ChartDeprecatedType.DONUT));
+    expect(component.mergedOptions.chart.type).toBe(ChartDeprecatedType.PIE);
+    expect(component.mergedOptions.plotOptions.pie.innerSize).toBe('50%');
+  });
+
+  it('should set areaspline chart type', () => {
+    component.type = ChartDeprecatedType.AREASPLINE;
+    component.ngOnChanges({ type: {} as any });
+
+    expect((component.type = ChartDeprecatedType.AREASPLINE));
+    expect(component.mergedOptions.chart.type).toBe(ChartDeprecatedType.AREASPLINE);
+  });
+
+  it('should have dataLabels enabled as default', () => {
+    expect(
+      (component.mergedOptions.plotOptions.pie.dataLabels as PlotSeriesDataLabelsOptions).enabled
+    ).toBe(true);
+  });
+
+  it('should disable dataLabels when false', () => {
+    component.showDataLabels = false;
+    component.ngOnChanges({ type: {} as any });
+
+    expect(
+      (component.mergedOptions.plotOptions.pie.dataLabels as PlotSeriesDataLabelsOptions).enabled
+    ).toBe(false);
+  });
+
+  it('should set correct input data in chart series', () => {
+    component.data = [
+      {
+        name: 'Boomerangs 20%',
+        y: 20,
+        label: '20%',
+      },
+      {
+        name: 'Bubbles 41%',
+        y: 41,
+        label: '41%',
+      },
+    ];
+    component.ngOnChanges({ type: {} as any });
+    const data = (component.mergedOptions.series[0] as Highcharts.SeriesAreasplineOptions).data;
+
+    expect(data.length).toBe(2);
+    expect(data[0]['name']).toBe('Boomerangs 20%');
+  });
+
+  describe('ActivityGauge', () => {
+    it('should set correct title and subtitle', () => {
+      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
+
+      component.data = [
+        {
+          title: '1.234.567',
+          subtitle: 'Afdraget',
+        },
+      ];
+      component.ngOnChanges({ type: {} as any });
+
+      expect(component.mergedOptions.title.text).toBe('1.234.567');
+      expect(component.mergedOptions.subtitle.text).toBe('Afdraget');
+    });
+
+    it('should add backgroundColor to optionsarray', () => {
+      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
+      const ActivityGaugeOptions: Options = {
+        pane: {
+          background: [
+            {
+              backgroundColor: {
+                linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
+                stops: [
+                  [1, 'rgba(255, 255, 255, 0.3)'],
+                  [0, 'rgba(255, 255, 255, 0.3)'],
+                ],
+              },
+              outerRadius: '112%',
+              innerRadius: '88%',
+              borderWidth: 0,
+            },
+          ],
+        },
+      };
+
+      component.mergedOptions = ActivityGaugeOptions;
+
+      component.data = [
+        {
+          paneBackgroundColor: 'red',
+        },
+      ];
+      component.ngOnChanges({ type: {} as any });
+
+      expect(component.mergedOptions.pane.background[0].backgroundColor).toEqual(
+        component.data[0].paneBackgroundColor
+      );
+    });
+
+    it('should change title and subtitle color when color-attribute is set', () => {
+      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
+      component.data = [
+        {
+          color: 'red',
+        },
+      ];
+      component.ngOnChanges({ type: {} as any });
+
+      const expected = component.data[0].color;
+
+      expect(component.mergedOptions.title.style.color).toEqual(expected);
+      expect(component.mergedOptions.subtitle.style.color).toEqual(expected);
+    });
+
+    it('should set type to solidgauge when ACTIVITYGAUGE is chosen', () => {
+      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
+      component.data = [
+        {
+          title: '',
+          subtitle: '',
+        },
+      ];
+      component.ngOnChanges({ type: {} as any });
+
+      expect(component.mergedOptions.series[0].type).toEqual('solidgauge');
+    });
+
+    it('should set activitygauge chart type', () => {
+      component.type = ChartDeprecatedType.ACTIVITYGAUGE;
+      component.data = [
+        {
+          title: 'test',
+          subtitle: 'test',
+        },
+      ];
+      component.ngOnChanges({ type: {} as any });
+
+      expect(component.mergedOptions.chart.type).toBe(ChartDeprecatedType.ACTIVITYGAUGE);
+    });
+  });
+
+  describe('column', () => {
+    it('should set inputs correct', () => {
+      component.type = ChartDeprecatedType.COLUMN;
+      component.data = [1, 2, 3];
+      component.categories = ['jan', 'feb', 'mar'];
+      component.ngOnChanges({ type: {} as any });
+      const dataMax = Math.max(...component.data);
+
+      expect(component.mergedOptions.series as any).toEqual([
+        {
+          type: 'column',
+          name: 'InvisibleClickReceiver',
+          data: component.data.map((_, idx) => dataMax - component.data[idx]),
+          opacity: 0,
+        },
+        {
+          type: 'column',
+          data: component.data,
+        },
+      ]);
+
+      expect((component.mergedOptions.xAxis as XAxisOptions).categories).toEqual(
+        component.categories
+      );
+    });
+  });
+
+  describe('bar', () => {
+    it('should set inputs correct', () => {
+      component.type = ChartDeprecatedType.BAR;
+      component.data = [1, 2, 3];
+      component.categories = ['jan', 'feb', 'mar'];
+      component.ngOnChanges({ type: {} as any });
+
+      expect(component.mergedOptions.series as any).toEqual([
+        {
+          type: 'bar',
+          name: 'InvisibleClickReceiver',
+          data: component.data.map((dataEntry) => Math.max(...component.data) - dataEntry),
+          edgeColor: 'rgb(255, 255, 255, 0)',
+          opacity: 0,
+        },
+        {
+          type: 'bar',
+          data: component.data,
+        },
+      ]);
+
+      expect((component.mergedOptions.xAxis as XAxisOptions).categories).toEqual(
+        component.categories
+      );
+    });
+  });
+
+  describe('override options', () => {
+    it('should override options', () => {
+      component.type = ChartDeprecatedType.PIE;
+      component.data = [
+        {
+          data: [1, 1],
+        },
+      ];
+
+      component.options = {
+        series: [
+          {
+            data: [2, 2],
+          } as any,
+        ],
+      };
+      component.ngOnChanges({ type: {} as any });
+
+      expect((component.mergedOptions.series[0] as any).data).toEqual([2, 2]);
+    });
+  });
+});