@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,233 @@
+import { Component, ElementRef, Inject, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Options,
+  PlotSeriesDataLabelsOptions,
+  XAxisBreaksOptions,
+  XAxisOptions,
+  YAxisOptions,
+} from 'highcharts';
+
+import { mergeDeep } from '../../helpers/merge-deep';
+
+import { ChartDeprecatedHelper } from './chart-deprecated-helper';
+import { ChartDeprecatedType } from './chart-deprecated-type';
+import { ActivityGaugeOptions, ACTIVITYGAUGE_OPTIONS } from './options/activitygauge';
+import { AreaSplineOptions, AREASPLINE_OPTIONS } from './options/areaspline';
+import { barOptions } from './options/bar';
+import { columnOptions } from './options/column';
+import { DonutOptions, DONUT_OPTIONS } from './options/donut';
+import { TimeSeriesOptions, TIMESERIES_OPTIONS } from './options/timeseries';
+
+@Component({
+  selector: 'kirby-chart-deprecated',
+  template: '',
+  styleUrls: ['./chart-deprecated.component.scss'],
+  providers: [
+    ChartDeprecatedHelper,
+    { provide: DONUT_OPTIONS, useValue: DonutOptions },
+    { provide: AREASPLINE_OPTIONS, useValue: AreaSplineOptions },
+    { provide: TIMESERIES_OPTIONS, useValue: TimeSeriesOptions },
+    { provide: ACTIVITYGAUGE_OPTIONS, useValue: ActivityGaugeOptions },
+  ],
+})
+export class ChartDeprecatedComponent implements OnChanges {
+  @Input() data = [];
+  @Input() categories: string[] = [];
+  @Input() breaks: Array<XAxisBreaksOptions> = [];
+  @Input() height = 300;
+  @Input() type: ChartDeprecatedType = ChartDeprecatedType.PIE;
+  @Input() description = '';
+  @Input() showDataLabels = true;
+  @Input() options: Options;
+  mergedOptions: Options = {
+    accessibility: {},
+  };
+
+  constructor(
+    private chartHelper: ChartDeprecatedHelper,
+    private hostElement: ElementRef,
+    @Inject(DONUT_OPTIONS) public donutOptions: Options,
+    @Inject(AREASPLINE_OPTIONS) public areasplineOptions: Options,
+    @Inject(TIMESERIES_OPTIONS) public timeSeriesOptions: Options,
+    @Inject(ACTIVITYGAUGE_OPTIONS) public activitygaugeOptions: Options
+  ) {
+    this.chartHelper.init(this.hostElement);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.type) {
+      this.setupChartType();
+    }
+    this.updateProperties();
+    this.chartHelper.renderChart(this.mergedOptions);
+  }
+
+  setupChartType() {
+    switch (this.type) {
+      case ChartDeprecatedType.DONUT: {
+        this.mergedOptions = this.donutOptions;
+        this.mergedOptions.chart.type = ChartDeprecatedType.PIE;
+        this.mergedOptions.plotOptions.pie.innerSize = '50%';
+        break;
+      }
+      case ChartDeprecatedType.PIE: {
+        this.mergedOptions = this.donutOptions;
+        this.mergedOptions.chart.type = this.type;
+        this.mergedOptions.plotOptions.pie.innerSize = '0%';
+        break;
+      }
+      case ChartDeprecatedType.AREASPLINE: {
+        this.mergedOptions = this.areasplineOptions;
+        this.mergedOptions.chart.type = this.type;
+        break;
+      }
+      case ChartDeprecatedType.TIMESERIES: {
+        this.mergedOptions = this.timeSeriesOptions;
+        this.mergedOptions.chart.type = this.type;
+        break;
+      }
+      case ChartDeprecatedType.ACTIVITYGAUGE: {
+        this.mergedOptions = this.activitygaugeOptions;
+        this.mergedOptions.chart.type = this.type;
+        break;
+      }
+      case ChartDeprecatedType.COLUMN: {
+        this.mergedOptions = columnOptions;
+        this.mergedOptions.chart.type = this.type;
+        break;
+      }
+      case ChartDeprecatedType.BAR: {
+        this.mergedOptions = barOptions;
+        this.mergedOptions.chart.type = this.type;
+        break;
+      }
+    }
+  }
+
+  updateProperties() {
+    this.mergedOptions.chart.height = this.height;
+    this.mergedOptions.accessibility.description = this.description;
+    switch (this.mergedOptions.chart.type) {
+      case ChartDeprecatedType.PIE:
+      case ChartDeprecatedType.DONUT: {
+        this.setPieInput();
+        break;
+      }
+      case ChartDeprecatedType.AREASPLINE: {
+        this.setSeries('areaspline');
+        break;
+      }
+      case ChartDeprecatedType.TIMESERIES: {
+        this.setTimeseriesInput();
+        break;
+      }
+      case ChartDeprecatedType.ACTIVITYGAUGE: {
+        this.setActivitygaugeInput();
+        break;
+      }
+      case ChartDeprecatedType.COLUMN: {
+        this.setColumnInput();
+        break;
+      }
+      case ChartDeprecatedType.BAR: {
+        this.setBarInput();
+        break;
+      }
+    }
+    if (!!this.options) {
+      this.mergedOptions = mergeDeep(this.mergedOptions, this.options);
+    }
+  }
+
+  private setPieInput() {
+    (this.mergedOptions.plotOptions.pie.dataLabels as PlotSeriesDataLabelsOptions).enabled =
+      this.showDataLabels;
+    this.setSeries('pie');
+  }
+
+  private setBarInput() {
+    const dataMaxValue = Math.max(...this.data);
+    this.mergedOptions.series = [
+      {
+        type: 'bar',
+        name: 'InvisibleClickReceiver',
+        data: this.data.map((dataEntry) => dataMaxValue - dataEntry),
+        edgeColor: 'rgb(255, 255, 255, 0)',
+        opacity: 0,
+      },
+      {
+        type: 'bar',
+        data: this.data,
+      },
+    ];
+    (this.mergedOptions.xAxis as XAxisOptions).categories = this.categories;
+  }
+
+  private setColumnInput() {
+    this.mergedOptions.series = [
+      {
+        type: 'column',
+        data: this.data,
+      },
+    ];
+    const dataMaxValue = Math.max(...this.data);
+    ((this.mergedOptions.yAxis as YAxisOptions).tickPositioner = () => {
+      var positions = [0, dataMaxValue];
+      return positions;
+    }),
+      (this.mergedOptions.series = [
+        {
+          type: 'column',
+          name: 'InvisibleClickReceiver',
+          data: this.data.map((_, idx) => dataMaxValue - this.data[idx]),
+          opacity: 0,
+        },
+        {
+          type: 'column',
+          data: this.data,
+        },
+      ]);
+    (this.mergedOptions.xAxis as XAxisOptions).categories = this.categories;
+  }
+
+  private setActivitygaugeInput() {
+    const data = this.data[0];
+    this.mergedOptions.title.text = data.title;
+    this.mergedOptions.subtitle.text = data.subtitle;
+    if (data.paneBackgroundColor) {
+      this.mergedOptions.pane.background = [
+        {
+          ...this.mergedOptions.pane.background[0],
+          backgroundColor: data.paneBackgroundColor,
+        },
+      ];
+    }
+    if (data.color) {
+      this.mergedOptions.title.style.color = data.color;
+      this.mergedOptions.subtitle.style.color = data.color;
+    }
+    this.mergedOptions.series = [
+      {
+        type: 'solidgauge',
+        data: data.series,
+      },
+    ];
+  }
+
+  private setTimeseriesInput() {
+    this.setSeries('area');
+    this.mergedOptions.xAxis = {
+      ...this.mergedOptions.xAxis,
+      breaks: this.breaks,
+    };
+  }
+
+  private setSeries(type) {
+    this.mergedOptions.series = [
+      {
+        type,
+        data: this.data,
+      },
+    ];
+  }
+}

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

@@ -0,0 +1,2 @@
+export { ChartDeprecatedComponent } from './chart-deprecated.component';
+export { ChartDeprecatedType } from './chart-deprecated-type';

package/src/lib/components/chart-deprecated/options/activitygauge.ts

@@ -0,0 +1,87 @@
+import { InjectionToken } from '@angular/core';
+import { Options } from 'highcharts';
+
+export const ACTIVITYGAUGE_OPTIONS = new InjectionToken<Options>('ActivityGaugeOptions');
+export const ActivityGaugeOptions: Options = {
+  chart: {
+    style: {
+      fontFamily: 'Roboto, sans-serif',
+      fontWeight: '300',
+    },
+    backgroundColor: 'transparent',
+    type: 'solidgauge',
+    height: '110%',
+  },
+  accessibility: {
+    description: '',
+  },
+  title: {
+    align: 'center',
+    verticalAlign: 'middle',
+    text: '',
+    y: 0,
+    floating: false,
+    style: {
+      fontSize: '30px',
+      color: '#fff',
+      fontWeight: 'bold',
+    },
+  },
+  subtitle: {
+    text: '',
+    align: 'center',
+    y: 25,
+    verticalAlign: 'middle',
+    style: {
+      color: '#fff',
+      fontSize: '14px',
+      fontWeight: 'normal',
+    },
+  },
+  credits: {
+    enabled: false,
+  },
+  tooltip: {
+    enabled: false,
+    animation: false,
+  },
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+    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,
+      },
+    ],
+  },
+  yAxis: {
+    min: 0,
+    max: 100,
+    lineWidth: 0,
+    tickPositions: [],
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        enabled: false,
+      },
+      linecap: 'round',
+      stickyTracking: false,
+      rounded: true,
+    },
+  },
+  series: [
+    {
+      type: 'solidgauge',
+    },
+  ],
+};

package/src/lib/components/chart-deprecated/options/areaspline.ts

@@ -0,0 +1,95 @@
+import { InjectionToken } from '@angular/core';
+import { Options } from 'highcharts';
+
+export const AREASPLINE_OPTIONS = new InjectionToken<Options>('AreasplineOptions');
+export const AreaSplineOptions: Options = {
+  chart: {
+    type: 'areaspline',
+    borderWidth: 0,
+    plotBorderWidth: 0,
+    margin: 0,
+    marginTop: 48,
+  },
+  accessibility: {
+    description: '',
+  },
+  title: {
+    text: '',
+  },
+  credits: {
+    enabled: false,
+  },
+  exporting: {
+    enabled: false,
+  },
+  tooltip: {
+    enabled: true,
+    animation: false,
+    shape: 'square',
+    borderColor: '#FFFFFF',
+    shadow: false,
+    backgroundColor: '#FFFFFF',
+    style: {
+      fontSize: '1.25rem',
+    },
+    formatter: function (): string {
+      return String(this.y);
+    },
+    positioner: function () {
+      return { x: this.chart.plotSizeX / 2 - this.label.width / 2, y: 0 };
+    },
+  },
+  xAxis: {
+    visible: false,
+    minPadding: 0,
+    maxPadding: 0,
+    crosshair: {
+      zIndex: 3,
+      width: 1,
+      color: '#177E17',
+    },
+  },
+  yAxis: {
+    visible: false,
+    endOnTick: false,
+    startOnTick: false,
+  },
+  plotOptions: {
+    areaspline: {
+      shadow: true,
+      showInLegend: false,
+      fillColor: {
+        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 0.8 },
+        stops: [
+          [0, '#C9E5C9'],
+          [1, '#FFFFFF'],
+        ],
+      },
+      lineColor: '#177E17',
+      lineWidth: 2,
+    },
+    series: {
+      states: {
+        hover: {
+          halo: {
+            size: 0,
+          },
+        },
+      },
+      marker: {
+        enabled: false,
+        states: {
+          hover: {
+            enabled: true,
+            fillColor: '#177E17',
+          },
+        },
+      },
+    },
+  },
+  series: [
+    {
+      type: 'areaspline',
+    },
+  ],
+};

package/src/lib/components/chart-deprecated/options/bar.ts

@@ -0,0 +1,93 @@
+import { Options } from 'highcharts';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+const getColor = DesignTokenHelper.getColor;
+const fontSize = DesignTokenHelper.fontSize;
+
+function colorPoints() {
+  var series = this.series;
+  for (var i = 0, ie = series.length; i < ie; ++i) {
+    var points = series[i].data;
+    for (var j = 0, je = points.length; j < je; ++j) {
+      if (points[j].graphic) {
+        points[j].graphic.element.style.stroke = getColor('background-color').value;
+      }
+    }
+  }
+}
+
+export const barOptions: Options = {
+  chart: {
+    type: 'bar',
+    animation: {
+      duration: 150,
+    },
+    backgroundColor: 'transparent',
+    events: {
+      load: colorPoints,
+      redraw: colorPoints,
+    },
+  },
+  accessibility: {
+    description: 'Bar chart',
+  },
+  credits: {
+    enabled: false,
+  },
+  title: {
+    text: '',
+  },
+  xAxis: {
+    labels: {
+      style: {
+        fontSize: fontSize('s'),
+        fontFamily: 'Roboto',
+        color: getColor('black').value,
+      },
+    },
+    min: 0,
+    lineColor: 'transparent',
+  },
+  yAxis: {
+    title: {
+      text: '',
+    },
+    labels: {
+      enabled: false,
+    },
+    min: 0,
+    lineWidth: 0,
+    minorGridLineWidth: 0,
+    gridLineColor: 'transparent',
+    minorTickLength: 0,
+    tickLength: 0,
+    maxPadding: 0,
+    endOnTick: false,
+    showLastLabel: false,
+    showFirstLabel: false,
+  },
+  plotOptions: {
+    bar: {
+      events: {},
+    },
+    series: {
+      color: getColor('secondary').value,
+      stacking: 'normal',
+      states: {
+        hover: {
+          enabled: false,
+        },
+        inactive: {
+          opacity: 1,
+        },
+      },
+    },
+  },
+  tooltip: {
+    enabled: false,
+  },
+  legend: {
+    enabled: false,
+  },
+};

package/src/lib/components/chart-deprecated/options/column.ts

@@ -0,0 +1,101 @@
+import { Options } from 'highcharts';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+const getColor = DesignTokenHelper.getColor;
+const fontSize = DesignTokenHelper.fontSize;
+
+function colorPoints() {
+  var series = this.series;
+  for (var i = 0, ie = series.length; i < ie; ++i) {
+    var points = series[i].data;
+    for (var j = 0, je = points.length; j < je; ++j) {
+      if (points[j].graphic) {
+        points[j].graphic.element.style.stroke = getColor('secondary').value;
+      }
+    }
+  }
+}
+
+export const columnOptions: Options = {
+  chart: {
+    animation: {
+      duration: 500,
+    },
+    backgroundColor: 'transparent',
+    type: 'column',
+    events: {
+      load: colorPoints,
+      redraw: colorPoints,
+    },
+  },
+  title: {
+    text: '',
+  },
+  accessibility: {
+    description: 'Column chart',
+  },
+  xAxis: {
+    labels: {
+      style: {
+        fontSize: fontSize('xxs'),
+        fontFamily: 'Roboto',
+        color: getColor('black').value,
+      },
+    },
+    lineWidth: 0,
+    minorGridLineWidth: 0,
+    lineColor: 'transparent',
+    minorTickLength: 0,
+    tickLength: 0,
+  },
+  yAxis: {
+    title: {
+      text: '',
+    },
+    labels: {
+      enabled: false,
+    },
+    min: 0,
+    lineWidth: 0,
+    minorGridLineWidth: 0,
+    gridLineColor: 'transparent',
+    minorTickLength: 0,
+    tickLength: 0,
+    showLastLabel: false,
+    showFirstLabel: false,
+  },
+  credits: {
+    enabled: false,
+  },
+  plotOptions: {
+    column: {
+      stacking: 'normal',
+    },
+    series: {
+      color: getColor('secondary').value,
+      zIndex: 10,
+      states: {
+        hover: {
+          enabled: false,
+        },
+        inactive: {
+          opacity: 1,
+        },
+      },
+    },
+    line: {
+      className: 'avg-line',
+      marker: {
+        enabled: false,
+      },
+      allowPointSelect: false,
+    },
+  },
+  tooltip: {
+    enabled: false,
+  },
+  legend: {
+    enabled: false,
+  },
+};