@kirbydesign/designsystem 0.0.0

package/src/lib/components/chart/chart-js/configured-chart-js.ts

@@ -0,0 +1,39 @@
+import {
+  BarController,
+  BarElement,
+  CategoryScale,
+  Chart,
+  Filler,
+  Legend,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  TimeScale,
+  Tooltip,
+} from 'chart.js';
+import 'chartjs-adapter-date-fns';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+import { mergeDeepAll } from '../../../helpers/merge-deep';
+import MarkerPlugin from '../chart-js/chartjs-plugin-marker/chartjs-plugin-marker';
+import { CHART_GLOBAL_DEFAULTS } from '../configs/global-defaults.config';
+
+const CHART_SCALES = [CategoryScale, LinearScale, TimeScale];
+const CHART_ELEMENTS = [BarElement, LineElement, PointElement];
+const CHART_CONTROLLERS = [BarController, LineController];
+const CHART_PLUGINS = [annotationPlugin, Filler, ChartDataLabels, Tooltip, MarkerPlugin];
+
+/* Order matters; defaults must be merged after register as 
+   register modifies the Chart.defaults objects */
+Chart.register(Legend, ...CHART_SCALES, ...CHART_ELEMENTS, ...CHART_CONTROLLERS, ...CHART_PLUGINS);
+
+/* Chart.defaults is read only; set each key modified in 
+   CHART_GLOBAL_DEFAULTS manually */
+const mergedDefaults = mergeDeepAll(Chart.defaults, CHART_GLOBAL_DEFAULTS);
+Object.entries(CHART_GLOBAL_DEFAULTS).forEach(([key]) => {
+  Chart.defaults[key] = mergedDefaults[key];
+});
+
+export { Chart };

package/src/lib/components/chart/chart-js/test-utils.ts

@@ -0,0 +1,171 @@
+import { AnnotationTypeRegistry } from 'chartjs-plugin-annotation';
+
+import { ChartTypesConfig } from '../chart.types';
+
+export const TEST_CHART_TYPES_CONFIG: ChartTypesConfig = {
+  bar: {
+    type: 'bar',
+    options: {
+      indexAxis: 'y',
+      elements: {
+        line: {
+          borderColor: 'blue',
+        },
+      },
+    },
+  },
+  column: {
+    type: 'bar',
+    options: {
+      backgroundColor: 'red',
+    },
+  },
+  line: {
+    type: 'line',
+    options: {
+      backgroundColor: 'blue',
+      elements: {
+        line: {
+          borderColor: 'red',
+        },
+      },
+    },
+  },
+  stock: {
+    type: 'line',
+    options: {
+      locale: 'en-US',
+      responsive: true,
+      animation: {
+        duration: 0,
+      },
+      layout: {
+        padding: {
+          left: 0,
+          right: 10,
+          top: 30,
+          bottom: 0,
+        },
+      },
+      backgroundColor: 'rgba(235, 235, 235, 0.5)',
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'day',
+            displayFormats: {
+              hour: 'HH:mm',
+              day: 'MMM d',
+            },
+          },
+          grid: {
+            lineWidth: 0,
+          },
+          ticks: {
+            maxRotation: 0,
+            source: 'data',
+            autoSkipPadding: 40,
+            font: {
+              size: 12,
+            },
+          },
+          adapters: {
+            date: {
+              locale: {
+                code: 'en-US',
+                formatLong: {},
+                localize: {},
+                match: {},
+                options: {
+                  weekStartsOn: 0,
+                  firstWeekContainsDate: 1,
+                },
+              },
+            },
+          },
+        },
+        y: {
+          position: 'right',
+          display: true,
+          grid: {
+            drawBorder: false,
+          },
+          ticks: {
+            display: true,
+            font: {
+              size: 12,
+            },
+          },
+        },
+      },
+      elements: {
+        line: {
+          tension: 0,
+          borderWidth: 2,
+        },
+        point: {
+          hitRadius: 20,
+          radius: 0,
+          hoverRadius: 0,
+          hoverBorderWidth: 0,
+        },
+      },
+      normalized: true,
+      plugins: {
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          caretSize: 1,
+          caretPadding: 12,
+          displayColors: true,
+          backgroundColor: '#ebebeb',
+          padding: 8,
+          titleColor: 'black',
+          bodyColor: 'black',
+          titleFont: {
+            weight: 'normal',
+            size: 12,
+          },
+          bodyFont: {
+            size: 16,
+            weight: 'bold',
+          },
+          callbacks: {},
+        },
+        // marker: {
+        //   line: {
+        //     color: 'red',
+        //   },
+        // },
+        datalabels: {
+          color: '#ffffff',
+          borderRadius: 3,
+          font: {
+            lineHeight: 1,
+            size: 12,
+          },
+          padding: {
+            top: 6,
+            left: 5,
+            right: 5,
+            bottom: 5,
+          },
+          offset: 5,
+        },
+      },
+    },
+  },
+};
+
+export const TEST_CHART_ANNOTATIONS_CONFIG: AnnotationTypeRegistry = {
+  line: {
+    borderDash: [6, 3],
+  },
+  ellipse: {
+    borderDash: [3, 6],
+  },
+  box: {},
+  point: {
+    backgroundColor: 'initial',
+  },
+};

package/src/lib/components/chart/chart.component.html

@@ -0,0 +1,7 @@
+<div class="chart-container">
+  <canvas #chartCanvas>
+    <!-- Slotted content makes it possible to insert fallback content for screen readers 
+    https://www.chartjs.org/docs/latest/general/accessibility.html-->
+    <ng-content></ng-content>
+  </canvas>
+</div>

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

@@ -0,0 +1,6 @@
+:host {
+  div {
+    height: var(--kirby-chart-height, 300px);
+    position: relative;
+  }
+}

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

@@ -0,0 +1,188 @@
+import { fakeAsync, tick } from '@angular/core/testing';
+import { createHostFactory, Spectator } from '@ngneat/spectator';
+import { MockProvider } from 'ng-mocks';
+
+import { ChartJSService } from './chart-js/chart-js.service';
+import { ChartComponent } from './chart.component';
+
+describe('ChartComponent', () => {
+  let spectator: Spectator<ChartComponent>;
+  let component: ChartComponent;
+  const createHost = createHostFactory({
+    component: ChartComponent,
+    declarations: [ChartComponent],
+    componentProviders: [MockProvider(ChartJSService)],
+  });
+
+  beforeEach(() => {
+    spectator = createHost('<kirby-chart></kirby-chart>');
+    component = spectator.component;
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should have correct default height', () => {
+    expect(spectator.query('.chart-container')).toHaveComputedStyle({
+      height: '300px',
+    });
+  });
+
+  describe(`when wrapper element doesn't have height & width`, () => {
+    let updateFnSpy;
+
+    beforeEach(() => {
+      updateFnSpy = spyOn<any>(component, 'updateLabels');
+      spectator.setInput('labels', ['1', '2']);
+    });
+
+    it('should not call the corresponding update function', () => {
+      expect(updateFnSpy).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('when "type" is not provided', () => {
+    it('should default to correct type', () => {
+      expect(component.type).toBe('column');
+    });
+  });
+
+  it('should render chart once after view init', fakeAsync(() => {
+    const renderChartSpy = spyOn<any>(component, 'renderChart');
+
+    component.ngAfterViewInit();
+    tick();
+
+    expect(renderChartSpy).toHaveBeenCalledTimes(1);
+  }));
+
+  it("should be possible to set the height with the '--kirby-chart-height' CSS custom property", () => {
+    const customHeight = '600px';
+    const chartContainerElement = spectator.query('.chart-container') as HTMLElement;
+    expect(chartContainerElement).not.toHaveComputedStyle({ height: customHeight });
+
+    spectator.element.style.setProperty('--kirby-chart-height', customHeight);
+
+    expect(chartContainerElement).toHaveComputedStyle({ height: customHeight });
+  });
+
+  describe("when setting height through the 'height' input property", () => {
+    it('should be possible to use a number', () => {
+      const customHeight = 600;
+      const element = spectator.query('.chart-container') as HTMLElement;
+      expect(element).not.toHaveComputedStyle({ height: `${customHeight}px` });
+
+      spectator.setInput('height', customHeight);
+      spectator.detectChanges();
+
+      expect(element).toHaveComputedStyle({ height: `${customHeight}px` });
+    });
+
+    it('should be possible to use a string', () => {
+      const customHeight = '600px';
+      const element = spectator.query('.chart-container') as HTMLElement;
+      expect(element).not.toHaveComputedStyle({ height: customHeight });
+
+      spectator.setInput('height', customHeight);
+      spectator.detectChanges();
+
+      expect(element).toHaveComputedStyle({ height: customHeight });
+    });
+  });
+
+  describe('when changes occur to', () => {
+    const scenarios = {
+      customOptions: {
+        updateFn: 'updateCustomOptions',
+        newValue: { onClick: () => console.log('testing') },
+      },
+      data: { updateFn: 'updateData', newValue: [1, 2, 3] },
+      labels: { updateFn: 'updateLabels', newValue: ['one', 'two', 'three'] },
+      type: { updateFn: 'updateType', newValue: 'bar' },
+      annotations: { updateFn: 'updateAnnotations', newValue: [{ type: 'line' }] },
+      highlightedElements: { updateFn: 'updateHighlightedElements', newValue: [[0, 1]] },
+    };
+
+    Object.entries(scenarios).forEach(([property, { updateFn, newValue }]) => {
+      describe(`${property}`, () => {
+        beforeEach(fakeAsync(() => {
+          spectator.component['ngAfterViewInit']();
+          tick();
+        }));
+
+        it(`should update ${property}`, () => {
+          const updateFnSpy = spyOn<any>(component, updateFn);
+
+          spectator.setInput(property as any, newValue);
+
+          expect(spectator.component['chartHasBeenRendered']).toBeTrue();
+          expect(updateFnSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it(`should not update properties that are not ${property}`, () => {
+          const updateFnSpies = Object.entries(scenarios)
+            .filter(([key]) => key !== property)
+            .map(([_, { updateFn }]) => spyOn<any>(component, updateFn));
+          expect(updateFnSpies.length).not.toBe(0);
+
+          spectator.setInput(property as any, newValue);
+
+          updateFnSpies.forEach((updateFnSpy) => expect(updateFnSpy).toHaveBeenCalledTimes(0));
+        });
+
+        it('should redraw once', () => {
+          const redrawChartSpy = spyOn<any>(component, 'redrawChart');
+
+          spectator.setInput(property as any, newValue);
+
+          expect(redrawChartSpy).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+
+    describe('multiple chartJS related input properties at the same time', () => {
+      beforeEach(fakeAsync(() => {
+        spectator.component['ngAfterViewInit']();
+        tick();
+      }));
+
+      it('should update all of the properties once', () => {
+        const updateFnSpies = [
+          spyOn<any>(component, 'updateData'),
+          spyOn<any>(component, 'updateLabels'),
+          spyOn<any>(component, 'updateType'),
+          spyOn<any>(component, 'updateCustomOptions'),
+          spyOn<any>(component, 'updateAnnotations'),
+          spyOn<any>(component, 'updateHighlightedElements'),
+        ];
+
+        spectator.setInput({
+          data: [1, 2, 3],
+          labels: ['one', 'two', 'three'],
+          type: 'bar',
+          customOptions: { onClick: () => console.log('testing') },
+          annotations: [{ type: 'line' }],
+          highlightedElements: [[0, 1]],
+        });
+
+        updateFnSpies.forEach((updateFnSpy) => {
+          expect(updateFnSpy).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      it('should redraw chart once', () => {
+        const redrawChartSpy = spyOn<any>(component, 'redrawChart');
+
+        spectator.setInput({
+          data: [1, 2, 3],
+          labels: ['one', 'two', 'three'],
+          type: 'bar',
+          customOptions: { onClick: () => console.log('testing') },
+        });
+
+        expect(redrawChartSpy).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,148 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { ChartOptions } from 'chart.js';
+import { AnnotationOptions } from 'chartjs-plugin-annotation';
+
+import { ResizeObserverFactory } from '../shared';
+
+import { ChartJSService } from './chart-js/chart-js.service';
+import {
+  ChartDataLabelOptions,
+  ChartDataset,
+  ChartHighlightedElements,
+  ChartLabel,
+  ChartType,
+} from './chart.types';
+
+@Component({
+  selector: 'kirby-chart',
+  templateUrl: './chart.component.html',
+  styleUrls: ['./chart.component.scss'],
+  providers: [ChartJSService],
+})
+export class ChartComponent implements AfterViewInit, OnChanges {
+  @Input() type: ChartType = 'column';
+  @Input() data: ChartDataset[] | number[];
+
+  @Input() labels: ChartLabel[];
+
+  @Input() customOptions?: ChartOptions;
+  @Input() dataLabelOptions?: ChartDataLabelOptions;
+  @Input() annotations?: AnnotationOptions[];
+  @Input() highlightedElements?: ChartHighlightedElements;
+
+  @HostBinding('style.--kirby-chart-height')
+  _height: string;
+  @Input() set height(value: string | number) {
+    this._height = typeof value === 'number' ? `${value}px` : value;
+  }
+
+  @ViewChild('chartCanvas')
+  canvasElement: ElementRef<HTMLCanvasElement>;
+
+  private chartHasBeenRendered: boolean = false;
+
+  constructor(private chartJSService: ChartJSService) {}
+
+  ngAfterViewInit() {
+    /* 
+       A chart is not rendered until it has both a height and a width. 
+       If ChartComponent is slotted in an ionic component it will
+       not have any height or width on afterViewInit. This will cause 
+       the animation to not be played on first draw. 
+    */
+    const canvasElement = this.canvasElement.nativeElement;
+    this.whenElementHasHeightAndWidth(canvasElement).then(() => this.renderChart());
+  }
+
+  private whenElementHasHeightAndWidth(element: HTMLElement): Promise<void> {
+    const rectIs2D = ({ width, height }) => height > 0 && width > 0;
+
+    return new Promise((resolve) => {
+      const initialClientRect = element.getBoundingClientRect();
+      if (rectIs2D(initialClientRect)) resolve();
+
+      const resizeObserver = new ResizeObserverFactory().create(([resizeObserverEntry]) => {
+        if (rectIs2D(resizeObserverEntry.contentRect)) {
+          resizeObserver.unobserve(element);
+          resolve();
+        }
+      });
+
+      resizeObserver.observe(element);
+    });
+  }
+
+  ngOnChanges(simpleChanges: SimpleChanges) {
+    if (this.chartHasBeenRendered) {
+      let shouldRedrawChart = false;
+
+      const keyUpdateFnPairs = {
+        data: () => this.updateData(),
+        labels: () => this.updateLabels(),
+        type: () => this.updateType(),
+        customOptions: () => this.updateCustomOptions(),
+        annotations: () => this.updateAnnotations(),
+        highlightedElements: () => this.updateHighlightedElements(),
+      };
+
+      Object.entries(simpleChanges).forEach(([key]) => {
+        if (simpleChanges[key].firstChange || !keyUpdateFnPairs[key]) return;
+        shouldRedrawChart = true;
+        keyUpdateFnPairs[key]();
+      });
+
+      if (shouldRedrawChart) this.redrawChart();
+    }
+  }
+
+  private renderChart() {
+    this.chartHasBeenRendered = true;
+    this.chartJSService.renderChart({
+      targetElement: this.canvasElement,
+      type: this.type,
+      data: this.data,
+      labels: this.labels,
+      customOptions: this.customOptions,
+      annotations: this.annotations,
+      dataLabelOptions: this.dataLabelOptions,
+      highlightedElements: this.highlightedElements,
+    });
+  }
+
+  private updateData() {
+    this.chartJSService.updateData(this.data);
+  }
+
+  private updateLabels() {
+    this.chartJSService.updateLabels(this.labels);
+  }
+
+  private updateType() {
+    this.chartJSService.updateType(this.type, this.customOptions);
+  }
+
+  private updateCustomOptions() {
+    this.chartJSService.updateOptions(this.customOptions, this.type);
+  }
+
+  private updateAnnotations() {
+    this.chartJSService.updateAnnotations(this.annotations);
+  }
+
+  private updateHighlightedElements() {
+    this.chartJSService.updateHighlightedElements(this.highlightedElements);
+  }
+
+  private redrawChart() {
+    this.chartJSService.redrawChart();
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+import { ChartComponent } from './chart.component';
+import { ChartConfigService } from './configs/chart-config.service';
+
+@NgModule({
+  declarations: [ChartComponent],
+  exports: [ChartComponent],
+  providers: [ChartConfigService],
+})
+export class ChartModule {}

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

@@ -0,0 +1,34 @@
+import { ChartDataset as ChartJSDataset, ChartOptions, ChartType as ChartJSType } from 'chart.js';
+
+export type ChartHighlightedElements = number[][];
+
+export type ChartType = 'column' | 'bar' | 'line' | 'stock';
+
+export type ChartTypeConfig = { type: ChartJSType; options?: ChartOptions };
+
+export type ChartTypesConfig = {
+  [key in ChartType]: ChartTypeConfig;
+};
+export type ChartLabel = string | string[]; // String[] allows for multi-line labels
+
+export type ChartDataLabelOptions = {
+  showMin?: boolean;
+  showMax?: boolean;
+  showCurrent?: boolean;
+  locale?: ChartLocale;
+  valueSuffix?: string;
+};
+
+export type ChartLocale = 'da-DK' | 'en-US';
+
+/* 
+  kirbyOptions.isStockChart is a hacky solution to this issue: 
+  https://github.com/kirbydesign/designsystem/issues/1967 
+*/
+export type ChartDataset = {
+  kirbyOptions?: { highlightedElements?: number[]; isStockChart?: boolean };
+} & ChartJSDataset;
+
+export function isNumberArray(value: any): value is number[] {
+  return Array.isArray(value) && value.every((item) => typeof item === 'number');
+}

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

@@ -0,0 +1,36 @@
+import { AnnotationTypeRegistry } from 'chartjs-plugin-annotation';
+
+import { ColorHelper } from '../../../helpers';
+
+const { getThemeColorHexString } = ColorHelper;
+
+/* The chart.js annotation does not allow for changing the 
+defaults it comes with. In order to have sensible defaults 
+this object is used instead and manually merged with the 
+rest of the annotations object */
+const borderColor = getThemeColorHexString('semi-dark');
+const borderDash: [number, number] = [6, 3];
+const borderWidth = 1;
+
+export const CHART_ANNOTATIONS_CONFIG: AnnotationTypeRegistry = {
+  line: {
+    borderDash,
+    borderWidth,
+    borderColor,
+  },
+  ellipse: {
+    borderDash,
+    borderWidth,
+    borderColor,
+    backgroundColor: 'transparent',
+  },
+  box: {
+    borderDash,
+    borderWidth,
+    borderColor,
+    backgroundColor: 'transparent',
+  },
+  point: {
+    backgroundColor: 'initial',
+  },
+};

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

@@ -0,0 +1,21 @@
+import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
+
+import { ChartConfigService } from './chart-config.service';
+
+describe('ChartConfigService', () => {
+  let service: ChartConfigService;
+  let spectator: SpectatorService<ChartConfigService>;
+
+  const createService = createServiceFactory({
+    service: ChartConfigService,
+  });
+
+  beforeEach(() => {
+    spectator = createService();
+    service = spectator.service;
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});