From 94a1b74ac99044d62031e3d013a3fea22552e788 Mon Sep 17 00:00:00 2001 From: Mads Buchmann Frederiksen Date: Mon, 28 Feb 2022 11:36:58 +0100 Subject: [PATCH] Remove deprecated chart components & highcharts dependencies (#2069) * :fire: Remove chart-deprecated components folder * :fire: Remove ChartDeprecated mocks * :fire: Remove deprecated chart examples * :fire: Remove deprecated chart showcase * :fire: Remove deprecated stock chart component * :fire: Remove deprecated stock chart examples * :fire: Remove deprecated stock chart showcase * :heavy_minus_sign: Remove dependency to highcharts * :pushpin: Generate new lock file * :memo: Remove highcharts license notice --- .../chart-deprecated-example.component.html | 7 - .../chart-deprecated-example.component.scss | 18 -- .../chart-deprecated-example.component.ts | 8 - .../chart-deprecated-example.module.ts | 31 -- ...ecated-example-activity-gauge.component.ts | 45 --- ...deprecated-example-areaspline.component.ts | 58 ---- .../chart-deprecated-example-bar.component.ts | 158 --------- ...art-deprecated-example-column.component.ts | 129 -------- ...hart-deprecated-example-donut.component.ts | 44 --- .../chart-deprecated-example-pie.component.ts | 43 --- ...deprecated-example-timeseries.component.ts | 301 ----------------- .../src/app/examples/examples.common.ts | 2 - .../src/app/examples/examples.module.ts | 2 - .../src/app/examples/examples.routes.ts | 10 - ...ck-chart-deprecated-example.component.html | 10 - ...ck-chart-deprecated-example.component.scss | 0 ...tock-chart-deprecated-example.component.ts | 305 ------------------ .../chart-deprecated-showcase.component.html | 30 -- .../chart-deprecated-showcase.component.scss | 5 - .../chart-deprecated-showcase.component.ts | 44 --- .../src/app/showcase/showcase.common.ts | 4 - .../src/app/showcase/showcase.routes.ts | 10 - ...k-chart-deprecated-showcase.component.html | 7 - ...k-chart-deprecated-showcase.component.scss | 0 ...ock-chart-deprecated-showcase.component.ts | 32 -- libs/designsystem/ng-package.json | 4 - libs/designsystem/ngcc.config.js | 2 +- libs/designsystem/package.json | 1 - .../chart-deprecated-helper.ts | 25 -- .../chart-deprecated/chart-deprecated-type.ts | 10 - .../chart-deprecated.component.scss | 3 - .../chart-deprecated.component.spec.ts | 273 ---------------- .../chart-deprecated.component.ts | 233 ------------- .../lib/components/chart-deprecated/index.ts | 2 - .../chart-deprecated/options/activitygauge.ts | 87 ----- .../chart-deprecated/options/areaspline.ts | 95 ------ .../chart-deprecated/options/bar.ts | 93 ------ .../chart-deprecated/options/column.ts | 101 ------ .../chart-deprecated/options/donut.ts | 118 ------- .../chart-deprecated/options/timeseries.ts | 96 ------ libs/designsystem/src/lib/components/index.ts | 2 - .../stock-chart-deprecated/index.ts | 2 - .../options/stock-chart-deprecated-options.ts | 220 ------------- .../stock-chart-deprecated.component.scss | 3 - .../stock-chart-deprecated.component.spec.ts | 34 -- .../stock-chart-deprecated.component.ts | 92 ------ libs/designsystem/src/lib/kirby.module.ts | 4 - .../mock.chart-deprecated.component.ts | 28 -- .../testing-base/src/lib/mock-components.ts | 2 - package-lock.json | 30 -- package.json | 1 - readme.md | 4 - 52 files changed, 1 insertion(+), 2867 deletions(-) delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.html delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.scss delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.ts delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.module.ts delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-activity-gauge.component.ts delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-donut.component.ts delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-pie.component.ts delete mode 100644 apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-timeseries.component.ts delete mode 100644 apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.html delete mode 100644 apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss delete mode 100644 apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.ts delete mode 100644 apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.html delete mode 100644 apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.scss delete mode 100644 apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.ts delete mode 100644 apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.html delete mode 100644 apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.scss delete mode 100644 apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-helper.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-type.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.scss delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.spec.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/index.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/activitygauge.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/areaspline.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/bar.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/column.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/donut.ts delete mode 100644 libs/designsystem/src/lib/components/chart-deprecated/options/timeseries.ts delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/index.ts delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.ts delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.scss delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.spec.ts delete mode 100644 libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.ts delete mode 100644 libs/designsystem/testing-base/src/lib/components/mock.chart-deprecated.component.ts diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.html b/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.html deleted file mode 100644 index 0a96ef69bf..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.scss b/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.scss deleted file mode 100644 index 30155e0d2d..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '~@kirbydesign/core/src/scss/utils'; - -:host { - display: block; - height: 100%; - overflow-x: hidden; - background: utils.get-color('background-color'); - padding: utils.size('s'); - - @include utils.media('>=medium') { - padding: utils.size('l'); - } - - > * { - display: block; - margin: utils.size('s') 0; - } -} diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.ts deleted file mode 100644 index 22aec2f5b9..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'cookbook-chart-deprecated-example', - templateUrl: './chart-deprecated-example.component.html', - styleUrls: ['./chart-deprecated-example.component.scss'], -}) -export class ChartDeprecatedExampleComponent {} diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.module.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.module.ts deleted file mode 100644 index d9cd26b4ae..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/chart-deprecated-example.module.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; - -import { KirbyModule } from '@kirbydesign/designsystem'; - -import { ChartDeprecatedExampleComponent } from './chart-deprecated-example.component'; -import { ChartDeprecatedExampleActivityGaugeComponent } from './examples/chart-deprecated-example-activity-gauge.component'; -import { ChartDeprecatedExampleAreasplineComponent } from './examples/chart-deprecated-example-areaspline.component'; -import { ChartDeprecatedExampleBarComponent } from './examples/chart-deprecated-example-bar.component'; -import { ChartDeprecatedExampleColumnComponent } from './examples/chart-deprecated-example-column.component'; -import { ChartDeprecatedExampleDonutComponent } from './examples/chart-deprecated-example-donut.component'; -import { ChartDeprecatedExamplePieComponent } from './examples/chart-deprecated-example-pie.component'; -import { ChartDeprecatedExampleTimeseriesComponent } from './examples/chart-deprecated-example-timeseries.component'; - -const COMPONENT_DECLARATIONS = [ - ChartDeprecatedExampleComponent, - ChartDeprecatedExampleActivityGaugeComponent, - ChartDeprecatedExampleAreasplineComponent, - ChartDeprecatedExampleDonutComponent, - ChartDeprecatedExampleColumnComponent, - ChartDeprecatedExamplePieComponent, - ChartDeprecatedExampleTimeseriesComponent, - ChartDeprecatedExampleBarComponent, -]; - -@NgModule({ - declarations: COMPONENT_DECLARATIONS, - imports: [CommonModule, KirbyModule], - exports: COMPONENT_DECLARATIONS, -}) -export class ChartDeprecatedExampleModule {} diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-activity-gauge.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-activity-gauge.component.ts deleted file mode 100644 index c50afd724c..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-activity-gauge.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Component } from '@angular/core'; - -const config = { - selector: 'cookbook-chart-deprecated-example-activity-gauge', - template: ` - -
- -
-`, -}; -@Component({ - selector: config.selector, - template: config.template, -}) -export class ChartDeprecatedExampleActivityGaugeComponent { - template = config.template; -} diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts deleted file mode 100644 index ee5af389ff..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-areaspline.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { Component } from '@angular/core'; - -const config = { - selector: 'cookbook-chart-deprecated-example-areaspline', - template: ` - - - - - - -
- Jan - Feb - Mar -
- -`, -}; -@Component({ - selector: config.selector, - template: config.template, -}) -export class ChartDeprecatedExampleAreasplineComponent { - template = config.template; - - data = [ - 1600.9, - 1710.5, - 1060.4, - 1290.2, - 1440.0, - 1460.0, - 1350.6, - 1480.5, - 1800.4, - 1940.1, - 1950.6, - 1700.4, - 1600.9, - 1710.5, - 1060.4, - 1290.2, - 1440.0, - 1460.0, - 1350.6, - 1480.5, - 1800.4, - 1940.1, - 1950.6, - 1700.4, - ]; -} diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts deleted file mode 100644 index be5492e9d0..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts +++ /dev/null @@ -1,158 +0,0 @@ -import { Component } from '@angular/core'; -import { Options, SeriesClickCallbackFunction, SeriesClickEventObject } from 'highcharts'; - -import { DesignTokenHelper, ModalController } from '@kirbydesign/designsystem'; - -const getColor = DesignTokenHelper.getColor; - -function colorPoints(selectedYear: string) { - return function() { - 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) { - if (points[j].category === selectedYear) { - points[j].graphic.element.style.fill = getColor('primary').value; - } - - points[j].graphic.element.style.stroke = getColor('background-color').value; - } - } - } - }; -} - -const config = { - selector: 'cookbook-chart-deprecated-example-bar', - template: ` - - - -`, - codeSnippet: `private yearlyOverviewClick: SeriesClickCallbackFunction = (ev: SeriesClickEventObject) => { - this.modalController.showAlert({ - title: 'Clicked chart', - message: 'You clicked on year: ' + ev.point.category, - okBtnText: 'Ok', - }); - - this.selectedYear = ev.point.category; - this.yearlyOverviewOptions.plotOptions.series.animation = false; - this.yearlyOverviewOptions.chart.events.load = colorPoints(this.selectedYear); - this.yearlyOverviewOptions.chart.events.redraw = colorPoints(this.selectedYear); - this.yearlyOverviewOptions = { ...this.yearlyOverviewOptions }; -}; - -yearlyOverviewOptions: Options = { - chart: { - events: { - load: colorPoints(this.selectedYear), - redraw: colorPoints(this.selectedYear), - }, - }, - plotOptions: { - series: {}, - bar: { - events: { - click: this.yearlyOverviewClick.bind(this), - }, - }, - }, - series: [ - { - name: 'InvisibleClickReceiver', - data: this.adjustedYearExpensesData.map( - (wholeYearData, idx) => this.maxValue - (wholeYearData + this.currentTimeData[idx]) - ), - edgeColor: 'rgb(255, 255, 255, 0)', - opacity: 0, - }, - { - name: 'WholeYearExpenses', - data: this.adjustedYearExpensesData, - }, - { - name: 'CurrentTimeExpsenses', - data: this.currentTimeData, - }, - ] as any, -};`, -}; - -@Component({ - selector: config.selector, - template: config.template, -}) -export class ChartDeprecatedExampleBarComponent { - template: string = config.template; - codeSnippet: string = config.codeSnippet; - height = 150; - - private yearExpensesData = [0, 8761, 7760]; - private currentTimeData = [0, 1000, 800]; - private maxValue = Math.max(...this.yearExpensesData) + Math.max(...this.currentTimeData); - private years = [2018, 2019, 2020].reverse(); - categories = this.years.map((year) => year.toString()); - private selectedYear = this.categories[0]; - private lowerLimit = Math.max(...this.yearExpensesData) * 0.01; - // lower limit is shown as 2% of max value for UX reasons - private adjustedYearExpensesData = this.yearExpensesData.map((data) => - this.lowerLimit >= data ? this.lowerLimit : data - ); - - private yearlyOverviewClick: SeriesClickCallbackFunction = (ev: SeriesClickEventObject) => { - this.modalController.showAlert({ - title: 'Clicked chart', - message: 'You clicked on year: ' + ev.point.category, - okBtnText: 'Ok', - }); - - this.selectedYear = ev.point.category; - this.yearlyOverviewOptions.plotOptions.series.animation = false; - this.yearlyOverviewOptions.chart.events.load = colorPoints(this.selectedYear); - this.yearlyOverviewOptions.chart.events.redraw = colorPoints(this.selectedYear); - this.yearlyOverviewOptions = { ...this.yearlyOverviewOptions }; - }; - - yearlyOverviewOptions: Options = { - chart: { - events: { - load: colorPoints(this.selectedYear), - redraw: colorPoints(this.selectedYear), - }, - }, - plotOptions: { - series: {}, - bar: { - events: { - click: this.yearlyOverviewClick.bind(this), - }, - }, - }, - series: [ - { - name: 'InvisibleClickReceiver', - data: this.adjustedYearExpensesData.map( - (wholeYearData, idx) => this.maxValue - (wholeYearData + this.currentTimeData[idx]) - ), - edgeColor: 'rgb(255, 255, 255, 0)', - opacity: 0, - }, - { - name: 'WholeYearExpenses', - data: this.adjustedYearExpensesData, - }, - { - name: 'CurrentTimeExpsenses', - data: this.currentTimeData, - }, - ] as any, - }; - - constructor(private modalController: ModalController) {} -} diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts deleted file mode 100644 index 13ca9c8d2f..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts +++ /dev/null @@ -1,129 +0,0 @@ -import { Component } from '@angular/core'; -import { Options, SeriesClickCallbackFunction, SeriesClickEventObject } from 'highcharts'; - -import { DesignTokenHelper, ModalController } from '@kirbydesign/designsystem'; - -const getColor = DesignTokenHelper.getColor; -function colorPoints(selectedIdx) { - return function() { - 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) { - if (j === selectedIdx) { - points[j].graphic.element.style.fill = getColor('primary').value; - points[j].graphic.element.style.stroke = getColor('primary').value; - } else { - points[j].graphic.element.style.stroke = getColor('secondary').value; - } - } - } - } - }; -} - -const config = { - selector: 'cookbook-chart-deprecated-example-column', - template: ` - - - -`, - codeSnippet: `private monthlyOverviewClick: SeriesClickCallbackFunction = (ev: SeriesClickEventObject) => { - this.modalController.showAlert({ - title: 'Clicked chart', - message: 'You clicked on column: ' + ev.point.category, - okBtnText: 'Ok', - }); - - this.selectedIdx = this.categories.indexOf(ev.point.category); - this.monthlyOverviewOptions.plotOptions.series.animation = false; - this.monthlyOverviewOptions.chart.events.load = colorPoints(this.selectedIdx); - this.monthlyOverviewOptions.chart.events.redraw = colorPoints(this.selectedIdx); - this.monthlyOverviewOptions = { ...this.monthlyOverviewOptions }; -}; -monthlyOverviewOptions: Options = { - chart: { events: {} }, - plotOptions: { - series: {}, - column: { - events: { - click: this.monthlyOverviewClick.bind(this), - }, - }, - }, - yAxis: { - plotLines: [ - { - width: 1, - color: getColor('semi-dark').value, - dashStyle: 'Dash', - value: 872, - }, - ], - }, -};`, -}; - -@Component({ - selector: config.selector, - template: config.template, -}) -export class ChartDeprecatedExampleColumnComponent { - template: string = config.template; - codeSnippet: string = config.codeSnippet; - height = 150; - - categories = ['mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec', 'jan', 'feb']; - private monthlyExpenseData = [0, 1400, 300, 500, 100, 1000, 1100, 450, 1350, 1200, 1250, 600]; - private selectedIdx = 0; - - // lower limit is shown as 2% of max value for UX reasons - private lowerLimit = Math.max(...this.monthlyExpenseData) * 0.02; - adjustedMonthlyExpenseData = this.monthlyExpenseData.map((data) => - this.lowerLimit >= data ? this.lowerLimit : data - ); - - private monthlyOverviewClick: SeriesClickCallbackFunction = (ev: SeriesClickEventObject) => { - this.modalController.showAlert({ - title: 'Clicked chart', - message: 'You clicked on column: ' + ev.point.category, - okBtnText: 'Ok', - }); - - this.selectedIdx = this.categories.indexOf(ev.point.category); - this.monthlyOverviewOptions.plotOptions.series.animation = false; - this.monthlyOverviewOptions.chart.events.load = colorPoints(this.selectedIdx); - this.monthlyOverviewOptions.chart.events.redraw = colorPoints(this.selectedIdx); - this.monthlyOverviewOptions = { ...this.monthlyOverviewOptions }; - }; - monthlyOverviewOptions: Options = { - chart: { events: {} }, - plotOptions: { - series: {}, - column: { - events: { - click: this.monthlyOverviewClick.bind(this), - }, - }, - }, - yAxis: { - plotLines: [ - { - width: 1, - color: getColor('semi-dark').value, - dashStyle: 'Dash', - value: 872, - }, - ], - }, - }; - - constructor(private modalController: ModalController) {} -} diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-donut.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-donut.component.ts deleted file mode 100644 index 42813ecf6e..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-donut.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Component } from '@angular/core'; - -const config = { - selector: 'cookbook-chart-deprecated-example-donut', - template: ` - - - -`, -}; -@Component({ - selector: config.selector, - template: config.template, -}) -export class ChartDeprecatedExampleDonutComponent { - template = config.template; -} diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-pie.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-pie.component.ts deleted file mode 100644 index e6dc17183f..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-pie.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component } from '@angular/core'; - -const config = { - selector: 'cookbook-chart-deprecated-example-pie', - template: ` - - -`, -}; -@Component({ - selector: config.selector, - template: config.template, -}) -export class ChartDeprecatedExamplePieComponent { - template = config.template; -} diff --git a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-timeseries.component.ts b/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-timeseries.component.ts deleted file mode 100644 index 83142e9e54..0000000000 --- a/apps/cookbook/src/app/examples/chart-deprecated-example/examples/chart-deprecated-example-timeseries.component.ts +++ /dev/null @@ -1,301 +0,0 @@ -import { Component } from '@angular/core'; - -const config = { - selector: 'cookbook-chart-deprecated-example-timeseries', - template: ` - - - -`, -}; -@Component({ - selector: config.selector, - template: config.template, -}) -export class ChartDeprecatedExampleTimeseriesComponent { - template = config.template; - breaks = [ - { - from: 1198914890000, - to: 1199232000000, - breakSize: 0, - }, - ]; - - rates = [ - [1198914890000, 0.6809], - [1199232000000, 0.6809], - [1199318400000, 0.6779], - [1199404800000, 0.6791], - [1199664000000, 0.6793], - [1199750400000, 0.6801], - [1199836800000, 0.6813], - [1199923200000, 0.6821], - [1200009600000, 0.6761], - [1200268800000, 0.6715], - [1200355200000, 0.6719], - [1200441600000, 0.6761], - [1200528000000, 0.6808], - [1200614400000, 0.6816], - [1200873600000, 0.6906], - [1200960000000, 0.69], - [1201046400000, 0.6863], - [1201132800000, 0.6821], - [1201219200000, 0.6801], - [1201478400000, 0.6778], - [1201564800000, 0.677], - [1201651200000, 0.6753], - [1201737600000, 0.6726], - [1201824000000, 0.6717], - [1202083200000, 0.6745], - [1202169600000, 0.6809], - [1202256000000, 0.684], - [1202342400000, 0.6865], - [1202428800000, 0.6891], - [1202688000000, 0.6878], - [1202774400000, 0.688], - [1202860800000, 0.6857], - [1202947200000, 0.6838], - [1203033600000, 0.6816], - [1203292800000, 0.6833], - [1203379200000, 0.6784], - [1203465600000, 0.6824], - [1203552000000, 0.6787], - [1203638400000, 0.6736], - [1203897600000, 0.675], - [1203984000000, 0.6724], - [1204070400000, 0.6648], - [1204156800000, 0.6614], - [1204243200000, 0.6594], - [1204502400000, 0.6579], - [1204588800000, 0.6577], - [1204675200000, 0.6582], - [1204761600000, 0.6529], - [1204848000000, 0.6487], - [1205107200000, 0.652], - [1205193600000, 0.6503], - [1205280000000, 0.6462], - [1205366400000, 0.6421], - [1205452800000, 0.6427], - [1205712000000, 0.6342], - [1205798400000, 0.6342], - [1205884800000, 0.6374], - [1205971200000, 0.6485], - [1206057600000, 0.6485], - [1206316800000, 0.6485], - [1206403200000, 0.6424], - [1206489600000, 0.6366], - [1206576000000, 0.6336], - [1206662400000, 0.6332], - [1206921600000, 0.6325], - [1207008000000, 0.6387], - [1207094400000, 0.6398], - [1207180800000, 0.6442], - [1207267200000, 0.6362], - [1207526400000, 0.6373], - [1207612800000, 0.6373], - [1207699200000, 0.636], - [1207785600000, 0.63], - [1207872000000, 0.6317], - [1208131200000, 0.6303], - [1208217600000, 0.6319], - [1208304000000, 0.6279], - [1208390400000, 0.6301], - [1208476800000, 0.6338], - [1208736000000, 0.6291], - [1208822400000, 0.6278], - [1208908800000, 0.6275], - [1208995200000, 0.6343], - [1209081600000, 0.6413], - [1209340800000, 0.64], - [1209427200000, 0.6423], - [1209513600000, 0.6436], - [1209600000000, 0.6436], - [1209686400000, 0.647], - [1209945600000, 0.6469], - [1210032000000, 0.6441], - [1210118400000, 0.6482], - [1210204800000, 0.6517], - [1210291200000, 0.647], - [1210550400000, 0.6482], - [1210636800000, 0.6464], - [1210723200000, 0.6478], - [1210809600000, 0.6463], - [1210896000000, 0.6453], - [1211155200000, 0.6421], - [1211241600000, 0.6395], - [1211328000000, 0.6349], - [1211414400000, 0.6348], - [1211500800000, 0.6353], - [1211760000000, 0.6346], - [1211846400000, 0.6346], - [1211932800000, 0.6388], - [1212019200000, 0.6431], - [1212105600000, 0.6449], - [1212364800000, 0.6444], - [1212451200000, 0.6414], - [1212537600000, 0.6467], - [1212624000000, 0.6494], - [1212710400000, 0.6412], - [1212969600000, 0.6337], - [1213056000000, 0.6442], - [1213142400000, 0.6446], - [1213228800000, 0.6487], - [1213315200000, 0.6522], - [1213574400000, 0.647], - [1213660800000, 0.6462], - [1213747200000, 0.6456], - [1213833600000, 0.6461], - [1213920000000, 0.6407], - [1214179200000, 0.6444], - [1214265600000, 0.6424], - [1214352000000, 0.6412], - [1214438400000, 0.6358], - [1214524800000, 0.6351], - [1214784000000, 0.6345], - [1214870400000, 0.634], - [1214956800000, 0.6328], - [1215043200000, 0.6296], - [1215129600000, 0.6382], - [1215388800000, 0.639], - [1215475200000, 0.6376], - [1215561600000, 0.6364], - [1215648000000, 0.6367], - [1215734400000, 0.6316], - [1215993600000, 0.6311], - [1216080000000, 0.6255], - [1216166400000, 0.6295], - [1216252800000, 0.6311], - [1216339200000, 0.6324], - [1216598400000, 0.6307], - [1216684800000, 0.6283], - [1216771200000, 0.6354], - [1216857600000, 0.638], - [1216944000000, 0.6357], - [1217203200000, 0.6352], - [1217289600000, 0.6368], - [1217376000000, 0.6416], - [1217462400000, 0.6407], - [1217548800000, 0.6422], - [1217808000000, 0.6425], - [1217894400000, 0.6458], - [1217980800000, 0.6462], - [1218067200000, 0.6465], - [1218153600000, 0.6635], - [1218412800000, 0.6662], - [1218499200000, 0.6709], - [1218585600000, 0.6711], - [1218672000000, 0.6709], - [1218758400000, 0.679], - [1219017600000, 0.6802], - [1219104000000, 0.6814], - [1219190400000, 0.6788], - [1219276800000, 0.6751], - [1219363200000, 0.6754], - [1219622400000, 0.6773], - [1219708800000, 0.6851], - [1219795200000, 0.6773], - [1219881600000, 0.6771], - [1219968000000, 0.6788], - [1220227200000, 0.684], - [1220313600000, 0.689], - [1220400000000, 0.6926], - [1220486400000, 0.6903], - [1220572800000, 0.702], - [1220832000000, 0.7036], - [1220918400000, 0.7071], - [1221004800000, 0.7096], - [1221091200000, 0.7178], - [1221177600000, 0.711], - [1221436800000, 0.7068], - [1221523200000, 0.701], - [1221609600000, 0.7031], - [1221696000000, 0.6897], - [1221782400000, 0.7025], - [1222041600000, 0.6864], - [1222128000000, 0.6789], - [1222214400000, 0.6808], - [1222300800000, 0.6804], - [1222387200000, 0.6832], - [1222646400000, 0.697], - [1222732800000, 0.6993], - [1222819200000, 0.7103], - [1222905600000, 0.7194], - [1222992000000, 0.723], - [1223251200000, 0.7336], - [1223337600000, 0.7337], - [1223424000000, 0.7284], - [1223510400000, 0.731], - [1223596800000, 0.7365], - [1223856000000, 0.7333], - [1223942400000, 0.7273], - [1224028800000, 0.734], - [1224115200000, 0.7405], - [1224201600000, 0.7461], - [1224460800000, 0.745], - [1224547200000, 0.7586], - [1224633600000, 0.7787], - [1224720000000, 0.7807], - [1224806400000, 0.794], - [1225065600000, 0.8027], - [1225152000000, 0.7984], - [1225238400000, 0.7832], - [1225324800000, 0.7673], - [1225411200000, 0.784], - [1225670400000, 0.78], - [1225756800000, 0.7801], - [1225843200000, 0.7771], - [1225929600000, 0.7832], - [1226016000000, 0.784], - [1226275200000, 0.7758], - [1226361600000, 0.7846], - [1226448000000, 0.7982], - [1226534400000, 0.7985], - [1226620800000, 0.7891], - [1226880000000, 0.79], - [1226966400000, 0.7904], - [1227052800000, 0.7916], - [1227139200000, 0.7974], - [1227225600000, 0.7936], - [1227484800000, 0.783], - [1227571200000, 0.7807], - [1227657600000, 0.7732], - [1227744000000, 0.7753], - [1227830400000, 0.7858], - [1228089600000, 0.7932], - [1228176000000, 0.7877], - [1228262400000, 0.7923], - [1228348800000, 0.7925], - [1228435200000, 0.7897], - [1228694400000, 0.7781], - [1228780800000, 0.779], - [1228867200000, 0.7738], - [1228953600000, 0.7568], - [1229040000000, 0.7497], - [1229299200000, 0.7403], - [1229385600000, 0.7306], - [1229472000000, 0.7114], - [1229558400000, 0.6843], - [1229644800000, 0.7175], - [1229904000000, 0.7159], - [1229990400000, 0.7155], - [1230076800000, 0.7141], - [1230163200000, 0.7141], - [1230249600000, 0.7141], - [1230508800000, 0.7009], - [1230595200000, 0.7094], - [1230681600000, 0.7186], - [1230768000000, 0.7186], - [1230854400000, 0.7213], - [1231113600000, 0.7364], - [1231200000000, 0.7502], - [1231286400000, 0.7357], - [1231372800000, 0.7345], - ]; -} diff --git a/apps/cookbook/src/app/examples/examples.common.ts b/apps/cookbook/src/app/examples/examples.common.ts index f3fb93e58d..b3ad95dd3d 100644 --- a/apps/cookbook/src/app/examples/examples.common.ts +++ b/apps/cookbook/src/app/examples/examples.common.ts @@ -50,7 +50,6 @@ import { SlideButtonExampleComponent } from './slide-button-example/slide-button import { CookbookExampleCardContentComponent } from './slides-example/example-card-content'; import { SlidesExampleComponent } from './slides-example/slides-example.component'; import { SpinnerExampleComponent } from './spinner-example/spinner-example.component'; -import { StockChartDeprecatedExampleComponent } from './stock-chart-deprecated-example/stock-chart-deprecated-example.component'; import { StylingHtmlListsExampleComponent } from './styling-html-lists-example/styling-html-lists-example.component'; import { TabExampleComponent } from './tabs-example/tab/tab-example.component'; import { TabsExampleComponent } from './tabs-example/tabs-example.component'; @@ -116,7 +115,6 @@ export const COMPONENT_DECLARATIONS: any[] = [ DividerExampleComponent, ReorderListExampleComponent, DropdownExampleComponent, - StockChartDeprecatedExampleComponent, ProgressCircleExampleComponent, FlagExampleComponent, SlidesExampleComponent, diff --git a/apps/cookbook/src/app/examples/examples.module.ts b/apps/cookbook/src/app/examples/examples.module.ts index 5a8d7d75a6..22b16d2f6d 100644 --- a/apps/cookbook/src/app/examples/examples.module.ts +++ b/apps/cookbook/src/app/examples/examples.module.ts @@ -8,7 +8,6 @@ import { AccordionExampleModule } from './accordion-example/accordion-example.mo import { AvatarExampleModule } from './avatar-example/avatar-example.module'; import { BadgeExampleModule } from './badge-example/badge-example.module'; import { CardExampleComponent } from './card-example/card-example.component'; -import { ChartDeprecatedExampleModule } from './chart-deprecated-example/chart-deprecated-example.module'; import { ChartExampleModule } from './chart-example/chart-example.module'; import { CheckboxExampleModule } from './checkbox-example/checkbox-example.module'; import { DropdownExampleModule } from './dropdown-example/dropdown-example.module'; @@ -39,7 +38,6 @@ const IMPORTS = [ ListExamplesModule, DropdownExampleModule, SegmentedControlExampleModule, - ChartDeprecatedExampleModule, ChartExampleModule, ItemSlidingExampleModule, BadgeExampleModule, diff --git a/apps/cookbook/src/app/examples/examples.routes.ts b/apps/cookbook/src/app/examples/examples.routes.ts index 6b62690a2b..db4ddb2dbc 100644 --- a/apps/cookbook/src/app/examples/examples.routes.ts +++ b/apps/cookbook/src/app/examples/examples.routes.ts @@ -11,7 +11,6 @@ import { ButtonExampleComponent } from './button-example/button-example.componen import { CalendarCardExampleComponent } from './calendar-example/calendar-card-example.component'; import { CalendarExampleComponent } from './calendar-example/calendar-example.component'; import { CardExampleComponent } from './card-example/card-example.component'; -import { ChartDeprecatedExampleComponent } from './chart-deprecated-example/chart-deprecated-example.component'; import { ChartExampleComponent } from './chart-example/chart-example.component'; import { CheckboxExampleComponent } from './checkbox-example/checkbox-example.component'; import { ChipExampleComponent } from './chip-example/chip-example.component'; @@ -65,7 +64,6 @@ import { SegmentedControlExampleComponent } from './segmented-control-example/se import { SlideButtonExampleComponent } from './slide-button-example/slide-button-example.component'; import { SlidesExampleComponent } from './slides-example/slides-example.component'; import { SpinnerExampleComponent } from './spinner-example/spinner-example.component'; -import { StockChartDeprecatedExampleComponent } from './stock-chart-deprecated-example/stock-chart-deprecated-example.component'; import { StylingHtmlListsExampleComponent } from './styling-html-lists-example/styling-html-lists-example.component'; import { TabExampleComponent } from './tabs-example/tab/tab-example.component'; import { TabsExampleComponent } from './tabs-example/tabs-example.component'; @@ -343,18 +341,10 @@ export const routes: Routes = [ path: 'list-experimental', component: ListExperimentalExampleComponent, }, - { - path: 'chart-deprecated', - component: ChartDeprecatedExampleComponent, - }, { path: 'chart', component: ChartExampleComponent, }, - { - path: 'stock-chart-deprecated', - component: StockChartDeprecatedExampleComponent, - }, { path: 'grid', component: GridExampleComponent, diff --git a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.html b/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.html deleted file mode 100644 index 90104d59d8..0000000000 --- a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - diff --git a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss b/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.ts b/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.ts deleted file mode 100644 index 79579924ec..0000000000 --- a/apps/cookbook/src/app/examples/stock-chart-deprecated-example/stock-chart-deprecated-example.component.ts +++ /dev/null @@ -1,305 +0,0 @@ -import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core'; -import { Options } from 'highcharts'; - -import { - StockChartDeprecatedDataPoint, - stockChartDeprecatedOptions, -} from '@kirbydesign/designsystem'; - -const config = { - selector: 'cookbook-stock-chart-deprecated-example', - template: ` -`, -}; - -@Component({ - selector: config.selector, - template: config.template, -}) -export class StockChartDeprecatedExampleComponent implements OnInit { - template = config.template; - constructor(@Inject(LOCALE_ID) locale: string) { - this.height = 300; - this.options = stockChartDeprecatedOptions(locale, this.height); - } - - options: Options; - height: number; - - data: StockChartDeprecatedDataPoint[] = [ - { x: 1198914890000, y: 0.6809, id: '' }, - { x: 1199232000000, y: 0.6809, id: '' }, - { x: 1199318400000, y: 0.6779, id: '' }, - { x: 1199404800000, y: 0.6791, id: '' }, - { x: 1199664000000, y: 0.6793, id: '' }, - { x: 1199750400000, y: 0.6801, id: '' }, - { x: 1199836800000, y: 0.6813, id: '' }, - { x: 1199923200000, y: 0.6821, id: '' }, - { x: 1200009600000, y: 0.6761, id: '' }, - { x: 1200268800000, y: 0.6715, id: '' }, - { x: 1200355200000, y: 0.6719, id: '' }, - { x: 1200441600000, y: 0.6761, id: '' }, - { x: 1200528000000, y: 0.6808, id: '' }, - { x: 1200614400000, y: 0.6816, id: '' }, - { x: 1200873600000, y: 0.6906, id: '' }, - { x: 1200960000000, y: 0.69, id: '' }, - { x: 1201046400000, y: 0.6863, id: '' }, - { x: 1201132800000, y: 0.6821, id: '' }, - { x: 1201219200000, y: 0.6801, id: '' }, - { x: 1201478400000, y: 0.6778, id: '' }, - { x: 1201564800000, y: 0.677, id: '' }, - { x: 1201651200000, y: 0.6753, id: '' }, - { x: 1201737600000, y: 0.6726, id: '' }, - { x: 1201824000000, y: 0.6717, id: '' }, - { x: 1202083200000, y: 0.6745, id: '' }, - { x: 1202169600000, y: 0.6809, id: '' }, - { x: 1202256000000, y: 0.684, id: '' }, - { x: 1202342400000, y: 0.6865, id: '' }, - { x: 1202428800000, y: 0.6891, id: '' }, - { x: 1202688000000, y: 0.6878, id: '' }, - { x: 1202774400000, y: 0.688, id: '' }, - { x: 1202860800000, y: 0.6857, id: '' }, - { x: 1202947200000, y: 0.6838, id: '' }, - { x: 1203033600000, y: 0.6816, id: '' }, - { x: 1203292800000, y: 0.6833, id: '' }, - { x: 1203379200000, y: 0.6784, id: '' }, - { x: 1203465600000, y: 0.6824, id: '' }, - { x: 1203552000000, y: 0.6787, id: '' }, - { x: 1203638400000, y: 0.6736, id: '' }, - { x: 1203897600000, y: 0.675, id: '' }, - { x: 1203984000000, y: 0.6724, id: '' }, - { x: 1204070400000, y: 0.6648, id: '' }, - { x: 1204156800000, y: 0.6614, id: '' }, - { x: 1204243200000, y: 0.6594, id: '' }, - { x: 1204502400000, y: 0.6579, id: '' }, - { x: 1204588800000, y: 0.6577, id: '' }, - { x: 1204675200000, y: 0.6582, id: '' }, - { x: 1204761600000, y: 0.6529, id: '' }, - { x: 1204848000000, y: 0.6487, id: '' }, - { x: 1205107200000, y: 0.652, id: '' }, - { x: 1205193600000, y: 0.6503, id: '' }, - { x: 1205280000000, y: 0.6462, id: '' }, - { x: 1205366400000, y: 0.6421, id: '' }, - { x: 1205452800000, y: 0.6427, id: '' }, - { x: 1205712000000, y: 0.6342, id: '' }, - { x: 1205798400000, y: 0.6342, id: '' }, - { x: 1205884800000, y: 0.6374, id: '' }, - { x: 1205971200000, y: 0.6485, id: '' }, - { x: 1206057600000, y: 0.6485, id: '' }, - { x: 1206316800000, y: 0.6485, id: '' }, - { x: 1206403200000, y: 0.6424, id: '' }, - { x: 1206489600000, y: 0.6366, id: '' }, - { x: 1206576000000, y: 0.6336, id: '' }, - { x: 1206662400000, y: 0.6332, id: '' }, - { x: 1206921600000, y: 0.6325, id: '' }, - { x: 1207008000000, y: 0.6387, id: '' }, - { x: 1207094400000, y: 0.6398, id: '' }, - { x: 1207180800000, y: 0.6442, id: '' }, - { x: 1207267200000, y: 0.6362, id: '' }, - { x: 1207526400000, y: 0.6373, id: '' }, - { x: 1207612800000, y: 0.6373, id: '' }, - { x: 1207699200000, y: 0.636, id: '' }, - { x: 1207785600000, y: 0.63, id: '' }, - { x: 1207872000000, y: 0.6317, id: '' }, - { x: 1208131200000, y: 0.6303, id: '' }, - { x: 1208217600000, y: 0.6319, id: '' }, - { x: 1208304000000, y: 0.6279, id: '' }, - { x: 1208390400000, y: 0.6301, id: '' }, - { x: 1208476800000, y: 0.6338, id: '' }, - { x: 1208736000000, y: 0.6291, id: '' }, - { x: 1208822400000, y: 0.6278, id: '' }, - { x: 1208908800000, y: 0.6275, id: 'min' }, - { x: 1208995200000, y: 0.6343, id: '' }, - { x: 1209081600000, y: 0.6413, id: '' }, - { x: 1209340800000, y: 0.64, id: '' }, - { x: 1209427200000, y: 0.6423, id: '' }, - { x: 1209513600000, y: 0.6436, id: '' }, - { x: 1209600000000, y: 0.6436, id: '' }, - { x: 1209686400000, y: 0.647, id: '' }, - { x: 1209945600000, y: 0.6469, id: '' }, - { x: 1210032000000, y: 0.6441, id: '' }, - { x: 1210118400000, y: 0.6482, id: '' }, - { x: 1210204800000, y: 0.6517, id: '' }, - { x: 1210291200000, y: 0.647, id: '' }, - { x: 1210550400000, y: 0.6482, id: '' }, - { x: 1210636800000, y: 0.6464, id: '' }, - { x: 1210723200000, y: 0.6478, id: '' }, - { x: 1210809600000, y: 0.6463, id: '' }, - { x: 1210896000000, y: 0.6453, id: '' }, - { x: 1211155200000, y: 0.6421, id: '' }, - { x: 1211241600000, y: 0.6395, id: '' }, - { x: 1211328000000, y: 0.6349, id: '' }, - { x: 1211414400000, y: 0.6348, id: '' }, - { x: 1211500800000, y: 0.6353, id: '' }, - { x: 1211760000000, y: 0.6346, id: '' }, - { x: 1211846400000, y: 0.6346, id: '' }, - { x: 1211932800000, y: 0.6388, id: '' }, - { x: 1212019200000, y: 0.6431, id: '' }, - { x: 1212105600000, y: 0.6449, id: '' }, - { x: 1212364800000, y: 0.6444, id: '' }, - { x: 1212451200000, y: 0.6414, id: '' }, - { x: 1212537600000, y: 0.6467, id: '' }, - { x: 1212624000000, y: 0.6494, id: '' }, - { x: 1212710400000, y: 0.6412, id: '' }, - { x: 1212969600000, y: 0.6337, id: '' }, - { x: 1213056000000, y: 0.6442, id: '' }, - { x: 1213142400000, y: 0.6446, id: '' }, - { x: 1213228800000, y: 0.6487, id: '' }, - { x: 1213315200000, y: 0.6522, id: '' }, - { x: 1213574400000, y: 0.647, id: '' }, - { x: 1213660800000, y: 0.6462, id: '' }, - { x: 1213747200000, y: 0.6456, id: '' }, - { x: 1213833600000, y: 0.6461, id: '' }, - { x: 1213920000000, y: 0.6407, id: '' }, - { x: 1214179200000, y: 0.6444, id: '' }, - { x: 1214265600000, y: 0.6424, id: '' }, - { x: 1214352000000, y: 0.6412, id: '' }, - { x: 1214438400000, y: 0.6358, id: '' }, - { x: 1214524800000, y: 0.6351, id: '' }, - { x: 1214784000000, y: 0.6345, id: '' }, - { x: 1214870400000, y: 0.634, id: '' }, - { x: 1214956800000, y: 0.6328, id: '' }, - { x: 1215043200000, y: 0.6296, id: '' }, - { x: 1215129600000, y: 0.6382, id: '' }, - { x: 1215388800000, y: 0.639, id: '' }, - { x: 1215475200000, y: 0.6376, id: '' }, - { x: 1215561600000, y: 0.6364, id: '' }, - { x: 1215648000000, y: 0.6367, id: '' }, - { x: 1215734400000, y: 0.6316, id: '' }, - { x: 1215993600000, y: 0.6311, id: '' }, - { x: 1216080000000, y: 0.6255, id: '' }, - { x: 1216166400000, y: 0.6295, id: '' }, - { x: 1216252800000, y: 0.6311, id: '' }, - { x: 1216339200000, y: 0.6324, id: '' }, - { x: 1216598400000, y: 0.6307, id: '' }, - { x: 1216684800000, y: 0.6283, id: '' }, - { x: 1216771200000, y: 0.6354, id: '' }, - { x: 1216857600000, y: 0.638, id: '' }, - { x: 1216944000000, y: 0.6357, id: '' }, - { x: 1217203200000, y: 0.6352, id: '' }, - { x: 1217289600000, y: 0.6368, id: '' }, - { x: 1217376000000, y: 0.6416, id: '' }, - { x: 1217462400000, y: 0.6407, id: '' }, - { x: 1217548800000, y: 0.6422, id: '' }, - { x: 1217808000000, y: 0.6425, id: '' }, - { x: 1217894400000, y: 0.6458, id: '' }, - { x: 1217980800000, y: 0.6462, id: '' }, - { x: 1218067200000, y: 0.6465, id: '' }, - { x: 1218153600000, y: 0.6635, id: '' }, - { x: 1218412800000, y: 0.6662, id: '' }, - { x: 1218499200000, y: 0.6709, id: '' }, - { x: 1218585600000, y: 0.6711, id: '' }, - { x: 1218672000000, y: 0.6709, id: '' }, - { x: 1218758400000, y: 0.679, id: '' }, - { x: 1219017600000, y: 0.6802, id: '' }, - { x: 1219104000000, y: 0.6814, id: '' }, - { x: 1219190400000, y: 0.6788, id: '' }, - { x: 1219276800000, y: 0.6751, id: '' }, - { x: 1219363200000, y: 0.6754, id: '' }, - { x: 1219622400000, y: 0.6773, id: '' }, - { x: 1219708800000, y: 0.6851, id: '' }, - { x: 1219795200000, y: 0.6773, id: '' }, - { x: 1219881600000, y: 0.6771, id: '' }, - { x: 1219968000000, y: 0.6788, id: '' }, - { x: 1220227200000, y: 0.684, id: '' }, - { x: 1220313600000, y: 0.689, id: '' }, - { x: 1220400000000, y: 0.6926, id: '' }, - { x: 1220486400000, y: 0.6903, id: '' }, - { x: 1220572800000, y: 0.702, id: '' }, - { x: 1220832000000, y: 0.7036, id: '' }, - { x: 1220918400000, y: 0.7071, id: '' }, - { x: 1221004800000, y: 0.7096, id: '' }, - { x: 1221091200000, y: 0.7178, id: '' }, - { x: 1221177600000, y: 0.711, id: '' }, - { x: 1221436800000, y: 0.7068, id: '' }, - { x: 1221523200000, y: 0.701, id: '' }, - { x: 1221609600000, y: 0.7031, id: '' }, - { x: 1221696000000, y: 0.6897, id: '' }, - { x: 1221782400000, y: 0.7025, id: '' }, - { x: 1222041600000, y: 0.6864, id: '' }, - { x: 1222128000000, y: 0.6789, id: '' }, - { x: 1222214400000, y: 0.6808, id: '' }, - { x: 1222300800000, y: 0.6804, id: '' }, - { x: 1222387200000, y: 0.6832, id: '' }, - { x: 1222646400000, y: 0.697, id: '' }, - { x: 1222732800000, y: 0.6993, id: '' }, - { x: 1222819200000, y: 0.7103, id: '' }, - { x: 1222905600000, y: 0.7194, id: '' }, - { x: 1222992000000, y: 0.723, id: '' }, - { x: 1223251200000, y: 0.7336, id: '' }, - { x: 1223337600000, y: 0.7337, id: '' }, - { x: 1223424000000, y: 0.7284, id: '' }, - { x: 1223510400000, y: 0.731, id: '' }, - { x: 1223596800000, y: 0.7365, id: '' }, - { x: 1223856000000, y: 0.7333, id: '' }, - { x: 1223942400000, y: 0.7273, id: '' }, - { x: 1224028800000, y: 0.734, id: '' }, - { x: 1224115200000, y: 0.7405, id: '' }, - { x: 1224201600000, y: 0.7461, id: '' }, - { x: 1224460800000, y: 0.745, id: '' }, - { x: 1224547200000, y: 0.7586, id: '' }, - { x: 1224633600000, y: 0.7787, id: '' }, - { x: 1224720000000, y: 0.7807, id: '' }, - { x: 1224806400000, y: 0.794, id: '' }, - { x: 1225065600000, y: 0.8027, id: 'max' }, - { x: 1225152000000, y: 0.7984, id: '' }, - { x: 1225238400000, y: 0.7832, id: '' }, - { x: 1225324800000, y: 0.7673, id: '' }, - { x: 1225411200000, y: 0.784, id: '' }, - { x: 1225670400000, y: 0.78, id: '' }, - { x: 1225756800000, y: 0.7801, id: '' }, - { x: 1225843200000, y: 0.7771, id: '' }, - { x: 1225929600000, y: 0.7832, id: '' }, - { x: 1226016000000, y: 0.784, id: '' }, - { x: 1226275200000, y: 0.7758, id: '' }, - { x: 1226361600000, y: 0.7846, id: '' }, - { x: 1226448000000, y: 0.7982, id: '' }, - { x: 1226534400000, y: 0.7985, id: '' }, - { x: 1226620800000, y: 0.7891, id: '' }, - { x: 1226880000000, y: 0.79, id: '' }, - { x: 1226966400000, y: 0.7904, id: '' }, - { x: 1227052800000, y: 0.7916, id: '' }, - { x: 1227139200000, y: 0.7974, id: '' }, - { x: 1227225600000, y: 0.7936, id: '' }, - { x: 1227484800000, y: 0.783, id: '' }, - { x: 1227571200000, y: 0.7807, id: '' }, - { x: 1227657600000, y: 0.7732, id: '' }, - { x: 1227744000000, y: 0.7753, id: '' }, - { x: 1227830400000, y: 0.7858, id: '' }, - { x: 1228089600000, y: 0.7932, id: '' }, - { x: 1228176000000, y: 0.7877, id: '' }, - { x: 1228262400000, y: 0.7923, id: '' }, - { x: 1228348800000, y: 0.7925, id: '' }, - { x: 1228435200000, y: 0.7897, id: '' }, - { x: 1228694400000, y: 0.7781, id: '' }, - { x: 1228780800000, y: 0.779, id: '' }, - { x: 1228867200000, y: 0.7738, id: '' }, - { x: 1228953600000, y: 0.7568, id: '' }, - { x: 1229040000000, y: 0.7497, id: '' }, - { x: 1229299200000, y: 0.7403, id: '' }, - { x: 1229385600000, y: 0.7306, id: '' }, - { x: 1229472000000, y: 0.7114, id: '' }, - { x: 1229558400000, y: 0.6843, id: '' }, - { x: 1229644800000, y: 0.7175, id: '' }, - { x: 1229904000000, y: 0.7159, id: '' }, - { x: 1229990400000, y: 0.7155, id: '' }, - { x: 1230076800000, y: 0.7141, id: '' }, - { x: 1230163200000, y: 0.7141, id: '' }, - { x: 1230249600000, y: 0.7141, id: '' }, - { x: 1230508800000, y: 0.7009, id: '' }, - { x: 1230595200000, y: 0.7094, id: '' }, - { x: 1230681600000, y: 0.7186, id: '' }, - { x: 1230768000000, y: 0.7186, id: '' }, - { x: 1230854400000, y: 0.7213, id: '' }, - { x: 1231113600000, y: 0.7364, id: '' }, - { x: 1231200000000, y: 0.7502, id: '' }, - { x: 1231286400000, y: 0.7357, id: '' }, - { x: 1231372800000, y: 0.7345, id: '' }, - ]; - - ngOnInit() {} -} diff --git a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.html b/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.html deleted file mode 100644 index 4e17f5d98d..0000000000 --- a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.html +++ /dev/null @@ -1,30 +0,0 @@ -
- - - - - - - - - - - - - - - - - - - - - - - - -

Properties:

- -
diff --git a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.scss b/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.scss deleted file mode 100644 index e6bded8fe3..0000000000 --- a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '~@kirbydesign/core/src/scss/utils'; - -cookbook-example-viewer { - margin-bottom: utils.size('l'); -} diff --git a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.ts b/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.ts deleted file mode 100644 index 2a29328b0f..0000000000 --- a/apps/cookbook/src/app/showcase/chart-deprecated-showcase/chart-deprecated-showcase.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Component } from '@angular/core'; -import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component'; - -@Component({ - selector: 'cookbook-chart-deprecated-showcase', - templateUrl: './chart-deprecated-showcase.component.html', - styleUrls: ['./chart-deprecated-showcase.component.scss'], -}) -export class ChartDeprecatedShowcaseComponent { - properties: ApiDescriptionProperty[] = [ - { - name: 'height', - description: 'The height of the chart in px for web and dp for native', - type: ['number'], - }, - { - name: 'type', - description: 'The type of chart', - type: ['donut', 'pie', 'areaspline'], - }, - { - name: 'showDataLabels', - description: 'Enable or disable labels around pie/donut charts', - type: ['true', 'false'], - defaultValue: 'true', - }, - { - name: 'description', - description: 'Description of chart for accessibility', - type: ['string - e.g. "Distribution of assets in custody account"'], - }, - { - name: 'data', - description: 'Data input for chart', - type: ['See examples above for exact format'], - }, - { - name: 'options', - description: - 'The Highcharts options to configure the chart with (will override existing options using a deep merge)', - type: ['See [Highcharts options docs](https://api.highcharts.com/highcharts/)'], - }, - ]; -} diff --git a/apps/cookbook/src/app/showcase/showcase.common.ts b/apps/cookbook/src/app/showcase/showcase.common.ts index c8ad2a9fea..e486d845c3 100644 --- a/apps/cookbook/src/app/showcase/showcase.common.ts +++ b/apps/cookbook/src/app/showcase/showcase.common.ts @@ -13,7 +13,6 @@ import { BadgeShowcaseComponent } from './badge-showcase/badge-showcase.componen import { ButtonShowcaseComponent } from './button-showcase/button-showcase.component'; import { CalendarShowcaseComponent } from './calendar-showcase/calendar-showcase.component'; import { CardShowcaseComponent } from './card-showcase/card-showcase.component'; -import { ChartDeprecatedShowcaseComponent } from './chart-deprecated-showcase/chart-deprecated-showcase.component'; import { ChartShowcaseComponent } from './chart-showcase/chart-showcase.component'; import { CheckboxShowcaseComponent } from './checkbox-showcase/checkbox-showcase.component'; import { ChipShowcaseComponent } from './chip-showcase/chip-showcase.component'; @@ -46,7 +45,6 @@ import { ShowcaseComponent } from './showcase.component'; import { SlideButtonShowcaseComponent } from './slide-button-showcase/slide-button-showcase.component'; import { SlidesShowcaseComponent } from './slides-showcase/slides-showcase.component'; import { SpinnerShowcaseComponent } from './spinner-showcase/spinner-showcase.component'; -import { StockChartDeprecatedShowcaseComponent } from './stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component'; import { StylingHtmlListsShowcaseComponent } from './styling-html-lists/styling-html-lists-showcase'; import { TabsShowcaseComponent } from './tabs-showcase/tabs-showcase.component'; import { ToastShowcaseComponent } from './toast-showcase/toast-showcase.component'; @@ -67,7 +65,6 @@ export const COMPONENT_EXPORTS: any[] = [ ListNoShapeShowcaseComponent, GridShowcaseComponent, AvatarShowcaseComponent, - ChartDeprecatedShowcaseComponent, ChartShowcaseComponent, FontsShowcaseComponent, SpinnerShowcaseComponent, @@ -95,7 +92,6 @@ export const COMPONENT_EXPORTS: any[] = [ DividerShowcaseComponent, ReorderListShowcaseComponent, DropdownShowcaseComponent, - StockChartDeprecatedShowcaseComponent, ProgressCircleShowcaseComponent, FlagShowcaseComponent, SlidesShowcaseComponent, diff --git a/apps/cookbook/src/app/showcase/showcase.routes.ts b/apps/cookbook/src/app/showcase/showcase.routes.ts index c17825e90a..9fe4d369a9 100644 --- a/apps/cookbook/src/app/showcase/showcase.routes.ts +++ b/apps/cookbook/src/app/showcase/showcase.routes.ts @@ -13,7 +13,6 @@ import { BadgeShowcaseComponent } from './badge-showcase/badge-showcase.componen import { ButtonShowcaseComponent } from './button-showcase/button-showcase.component'; import { CalendarShowcaseComponent } from './calendar-showcase/calendar-showcase.component'; import { CardShowcaseComponent } from './card-showcase/card-showcase.component'; -import { ChartDeprecatedShowcaseComponent } from './chart-deprecated-showcase/chart-deprecated-showcase.component'; import { ChartShowcaseComponent } from './chart-showcase/chart-showcase.component'; import { CheckboxShowcaseComponent } from './checkbox-showcase/checkbox-showcase.component'; import { ChipShowcaseComponent } from './chip-showcase/chip-showcase.component'; @@ -47,7 +46,6 @@ import { ShowcaseComponent } from './showcase.component'; import { SlideButtonShowcaseComponent } from './slide-button-showcase/slide-button-showcase.component'; import { SlidesShowcaseComponent } from './slides-showcase/slides-showcase.component'; import { SpinnerShowcaseComponent } from './spinner-showcase/spinner-showcase.component'; -import { StockChartDeprecatedShowcaseComponent } from './stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component'; import { StylingHtmlListsShowcaseComponent } from './styling-html-lists/styling-html-lists-showcase'; import { TabsShowcaseComponent } from './tabs-showcase/tabs-showcase.component'; import { ToastShowcaseComponent } from './toast-showcase/toast-showcase.component'; @@ -149,18 +147,10 @@ export const routes: Routes = [ hide: true, }, }, - { - path: 'chart-deprecated', - component: ChartDeprecatedShowcaseComponent, - }, { path: 'chart', component: ChartShowcaseComponent, }, - { - path: 'stock-chart-deprecated', - component: StockChartDeprecatedShowcaseComponent, - }, { path: 'fonts', component: FontsShowcaseComponent, diff --git a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.html b/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.html deleted file mode 100644 index b2585d9afb..0000000000 --- a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - - -

Properties:

- diff --git a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.scss b/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.ts b/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.ts deleted file mode 100644 index af2afdf2df..0000000000 --- a/apps/cookbook/src/app/showcase/stock-chart-deprecated-showcase/stock-chart-deprecated-showcase.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component } from '@angular/core'; -import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component'; - -@Component({ - selector: 'cookbook-highstock-chart-deprecated-showcase', - templateUrl: './stock-chart-deprecated-showcase.component.html', - styleUrls: ['./stock-chart-deprecated-showcase.component.scss'], -}) -export class StockChartDeprecatedShowcaseComponent { - properties: ApiDescriptionProperty[] = [ - { - name: 'description', - description: 'Description of Highstock Chart for accessibility', - type: ['string - e.g. "Microsoft Stock (NASDAQ: MSFT) today"'], - }, - { - name: 'options', - description: 'Options input for Highstock Chart', - type: ['Options'], - }, - { - name: 'data', - description: 'Data input for Highstock Chart', - type: ['StockChartDataPoint[]'], - }, - { - name: 'height', - description: 'The height of the Highstock Chart in px for web and dp for native', - type: ['number'], - }, - ]; -} diff --git a/libs/designsystem/ng-package.json b/libs/designsystem/ng-package.json index 8a4a784302..8ab8c48670 100644 --- a/libs/designsystem/ng-package.json +++ b/libs/designsystem/ng-package.json @@ -8,9 +8,6 @@ "@ionic/angular": "ionic", "date-fns-tz": "date-fns-tz", "date-fns": "date-fns", - "highcharts": "highcharts", - "highcharts/highstock": "highcharts/highstock", - "highcharts/modules/annotations": "highcharts", "inputmask/lib/inputmask": "inputmask" } }, @@ -24,7 +21,6 @@ "chartjs-plugin-datalabels", "date-fns-tz", "date-fns", - "highcharts", "include-media", "inputmask", "ts-deepcopy" diff --git a/libs/designsystem/ngcc.config.js b/libs/designsystem/ngcc.config.js index 9ad66b9e13..05dcea2147 100644 --- a/libs/designsystem/ngcc.config.js +++ b/libs/designsystem/ngcc.config.js @@ -1,3 +1,3 @@ module.exports = { - ignorableDeepImportMatchers: [/highcharts\//, /inputmask\//], + ignorableDeepImportMatchers: [/inputmask\//], }; diff --git a/libs/designsystem/package.json b/libs/designsystem/package.json index ad920e526f..566f7a83da 100644 --- a/libs/designsystem/package.json +++ b/libs/designsystem/package.json @@ -11,7 +11,6 @@ "chartjs-plugin-datalabels": "^2.0.0", "date-fns-tz": "1.1.4", "date-fns": "2.21.1", - "highcharts": "8.0.4", "include-media": "^1.4.10", "inputmask": "5.0.5", "ts-deepcopy": "^0.1.4" diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-helper.ts b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-helper.ts deleted file mode 100644 index 1d7469798f..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-helper.ts +++ /dev/null @@ -1,25 +0,0 @@ -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); - } - } -} diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-type.ts b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-type.ts deleted file mode 100644 index 73c77a8567..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated-type.ts +++ /dev/null @@ -1,10 +0,0 @@ -export enum ChartDeprecatedType { - PIE = 'pie', - DONUT = 'donut', - AREASPLINE = 'areaspline', - TIMESERIES = 'timeseries', - ACTIVITYGAUGE = 'activitygauge', - BAR = 'bar', - COLUMN = 'column', - CUSTOM = 'custom', -} diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.scss b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.scss deleted file mode 100644 index 5d4e87f30f..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -:host { - display: block; -} diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.spec.ts b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.spec.ts deleted file mode 100644 index 141f507281..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.spec.ts +++ /dev/null @@ -1,273 +0,0 @@ -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; - - 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]); - }); - }); -}); diff --git a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.ts b/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.ts deleted file mode 100644 index 8afc7edc34..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/chart-deprecated.component.ts +++ /dev/null @@ -1,233 +0,0 @@ -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 = []; - @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, - }, - ]; - } -} diff --git a/libs/designsystem/src/lib/components/chart-deprecated/index.ts b/libs/designsystem/src/lib/components/chart-deprecated/index.ts deleted file mode 100644 index 7cbed50b62..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { ChartDeprecatedComponent } from './chart-deprecated.component'; -export { ChartDeprecatedType } from './chart-deprecated-type'; diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/activitygauge.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/activitygauge.ts deleted file mode 100644 index d44449259a..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/options/activitygauge.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { InjectionToken } from '@angular/core'; -import { Options } from 'highcharts'; - -export const ACTIVITYGAUGE_OPTIONS = new InjectionToken('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', - }, - ], -}; diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/areaspline.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/areaspline.ts deleted file mode 100644 index ba8e188ce2..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/options/areaspline.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { InjectionToken } from '@angular/core'; -import { Options } from 'highcharts'; - -export const AREASPLINE_OPTIONS = new InjectionToken('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', - }, - ], -}; diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/bar.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/bar.ts deleted file mode 100644 index 9e94c81118..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/options/bar.ts +++ /dev/null @@ -1,93 +0,0 @@ -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, - }, -}; diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/column.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/column.ts deleted file mode 100644 index ba5a572c40..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/options/column.ts +++ /dev/null @@ -1,101 +0,0 @@ -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, - }, -}; diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/donut.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/donut.ts deleted file mode 100644 index f5e5667c56..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/options/donut.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { InjectionToken } from '@angular/core'; -import { Options } from 'highcharts'; - -export const DONUT_OPTIONS = new InjectionToken('DonutOptions'); -export const DonutOptions: Options = { - chart: { - style: { - fontFamily: 'Roboto', - fontWeight: '300', - }, - backgroundColor: 'transparent', - type: '', - }, - accessibility: { - description: 'Donut chart', - }, - title: { - text: '', - }, - tooltip: { - enabled: false, - animation: false, - }, - legend: { - layout: 'vertical', - symbolRadius: 0, - itemStyle: { - fontSize: '.875rem', - }, - }, - plotOptions: { - pie: { - colors: ['#015132', '#B2D1BF', '#AABC08', '#1FA05A', 'yellowgreen'], - allowPointSelect: false, - cursor: 'pointer', - showInLegend: true, - borderColor: null, - dataLabels: { - format: '{point.label}', - enabled: true, - connectorWidth: 0, - distance: 5, - style: { - fontSize: '1rem', - fontWeight: '200', - }, - }, - point: { - events: { - legendItemClick: () => { - // Prevent the default behavior (toggle visibility of slices when clicking on legends) - return false; - }, - }, - }, - states: { - hover: { - enabled: false, - }, - }, - }, - series: { - animation: true, - dataLabels: {}, - states: { - hover: { - enabled: false, - }, - inactive: { - opacity: 1, - }, - }, - }, - }, - series: [ - { - name: '', - type: 'pie', - }, - ], - credits: { - enabled: false, - }, - exporting: { - enabled: false, - }, - responsive: { - rules: [ - { - condition: { - minWidth: 640, - }, - chartOptions: { - legend: { - layout: 'vertical', - align: 'right', - verticalAlign: 'middle', - itemMarginTop: 12, - symbolRadius: 0, - symbolWidth: 14, - symbolHeight: 14, - x: -100, - }, - }, - }, - { - condition: { - minWidth: 0, - }, - chartOptions: { - legend: { - symbolRadius: 0, - }, - }, - }, - ], - }, -}; diff --git a/libs/designsystem/src/lib/components/chart-deprecated/options/timeseries.ts b/libs/designsystem/src/lib/components/chart-deprecated/options/timeseries.ts deleted file mode 100644 index ec0e0524e7..0000000000 --- a/libs/designsystem/src/lib/components/chart-deprecated/options/timeseries.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { InjectionToken } from '@angular/core'; -import { dateFormat, Options } from 'highcharts'; - -export const TIMESERIES_OPTIONS = new InjectionToken('TimeSeriesOptions'); -export const TimeSeriesOptions: Options = { - chart: { - backgroundColor: { - linearGradient: { x1: 0, x2: 0, y1: 0, y2: 3 }, - stops: [ - [0, '#F6F6F6'], - [1, '#808080'], - ], - }, - zoomType: 'x', - type: 'timeseries', - borderWidth: 0, - plotBorderWidth: 0, - margin: 0, - marginTop: 48, - }, - accessibility: { - description: '', - }, - title: { - text: '', - }, - subtitle: { - text: '', - }, - tooltip: { - shadow: false, - formatter: function() { - // @ts-ignore - return dateFormat('%e. %b', new Date(this.x)) + '.' + '
' + this.y + ''; - }, - //xDateFormat: '%d/%m', - positioner: function(_labelWidth, _labelHeight, point) { - return { x: point.x, y: 0 }; - }, - borderWidth: 0, - }, - xAxis: { - visible: false, - lineColor: '#FFFFFF', - tickColor: '#FFFFFF', - labels: { - style: { - color: 'white', - }, - }, - opposite: true, - crosshair: { - zIndex: 3, - width: 1, - color: '#00E89A', - }, - type: 'datetime', - tickInterval: 1, - }, - yAxis: { - visible: false, - }, - legend: { - enabled: false, - }, - plotOptions: { - area: { - fillColor: '#01352C', - marker: { - lineWidth: 14, - lineColor: 'rgba(255,255,255,0.2)', - radius: 6, - fillColor: '#00E89A', - }, - lineColor: '#01352C', - lineWidth: 1, - states: { - hover: { - lineWidth: 1, - }, - }, - threshold: null, - }, - series: { - marker: { - enabledThreshold: 50, - }, - }, - }, - series: [ - { - type: 'area', - name: 'USD to EUR', - }, - ], -}; diff --git a/libs/designsystem/src/lib/components/index.ts b/libs/designsystem/src/lib/components/index.ts index 9915cbfa07..5d8ac6dd2b 100644 --- a/libs/designsystem/src/lib/components/index.ts +++ b/libs/designsystem/src/lib/components/index.ts @@ -5,9 +5,7 @@ export { AvatarComponent, AvatarSize } from './avatar/avatar.component'; export { ButtonComponent, ButtonSize } from './button/button.component'; export * from './card'; -export * from './chart-deprecated'; export * from './chart'; -export * from './stock-chart-deprecated'; export * from './calendar'; export * from './item-sliding'; diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/index.ts b/libs/designsystem/src/lib/components/stock-chart-deprecated/index.ts deleted file mode 100644 index 2e51a57e2e..0000000000 --- a/libs/designsystem/src/lib/components/stock-chart-deprecated/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './options/stock-chart-deprecated-options'; -export * from './stock-chart-deprecated.component'; diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.ts b/libs/designsystem/src/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.ts deleted file mode 100644 index 5b09a39257..0000000000 --- a/libs/designsystem/src/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.ts +++ /dev/null @@ -1,220 +0,0 @@ -import { formatNumber } from '@angular/common'; -import { Options } from 'highcharts'; -import { dateFormat } from 'highcharts/highstock'; - -import { ColorHelper } from '@kirbydesign/core'; - -export interface StockChartDeprecatedDataPoint { - x: number; - y: number; - id: 'min' | 'max' | ''; -} - -export const stockChartDeprecatedOptions = (locale: string, height: number) => { - const options: Options = defaultOptions(locale) as Options; - const transparentColor = 'rgba(255,255,255,0)'; - options.chart.backgroundColor = transparentColor; - options.chart.height = height; - - options.tooltip.backgroundColor = ColorHelper.getThemeColorRgbString('background-color'); - // Using a function instead of a lamdba-expression because of a reference to this. - options.tooltip.formatter = function() { - return ( - '
' + - // @ts-ignore - dateFormat('%e. %b', new Date(this.x)) + - '

' + - formatNumber(this.y, locale) + - '
' - ); - }; - options.plotOptions.area.fillColor = transparentColor; - options.plotOptions.area.lineColor = ColorHelper.getThemeColorRgbString('tertiary'); - - options.plotOptions.area.marker.lineColor = 'rgba(255,255,255,0.3)'; - options.plotOptions.area.marker.fillColor = ColorHelper.getThemeColorRgbString('primary'); - - options.xAxis = { - ...options.xAxis, - crosshair: { - color: ColorHelper.getThemeColorRgbString('primary'), - }, - tickColor: transparentColor, - lineColor: ColorHelper.getThemeColorRgbString('medium'), - labels: { - style: { - color: ColorHelper.getThemeColorRgbString('semi-dark-tint'), - }, - }, - }; - - options.yAxis = { - ...options.yAxis, - lineColor: transparentColor, - gridLineColor: ColorHelper.getThemeColorRgbString('medium'), - labels: { - style: { - color: ColorHelper.getThemeColorRgbString('semi-dark-tint'), - }, - }, - }; - - /* - // Using a function instead of a lamdba-expression because of a reference to this. - options.plotOptions.area.events.mouseOver = function() { - const transparentColor = 'rgba(255,255,255,0)'; - this.chart.xAxis[0].update({ - tickColor: transparentColor, - lineColor: ColorHelper.getThemeColorRgbString('medium'), - labels: { - style: { - color: ColorHelper.getThemeColorRgbString('semi-dark-tint'), - }, - }, - }); - }; - - // Using a function instead of a lamdba-expression because of a reference to this. - options.plotOptions.area.events.mouseOut = function() { - const transparentColor = 'rgba(255,255,255,0)'; - this.chart.xAxis[0].update({ - lineColor: transparentColor, - labels: { - style: { - color: transparentColor, - }, - }, - }); - }; - */ - - return options; -}; - -export const annotations = (locale: string): Highcharts.AnnotationsOptions => { - return { - id: 'minmax', - zIndex: 2, - labels: [ - { - point: 'max', - shape: 'rect', - distance: 5, - align: 'center', - verticalAlign: 'top', - backgroundColor: ColorHelper.getThemeColorRgbString('tertiary'), - // Using a function instead of a lamdba-expression because of a reference to this. - formatter: function() { - return formatNumber(this.y, locale, '1.1-1'); - }, - }, - { - point: 'min', - shape: 'rect', - distance: -28, - align: 'center', - verticalAlign: 'bottom', - backgroundColor: ColorHelper.getThemeColorRgbString('tertiary'), - // Using a function instead of a lamdba-expression because of a reference to this. - formatter: function() { - return formatNumber(this.y, locale, '1.1-1'); - }, - }, - ], - labelOptions: { - y: 0, - allowOverlap: true, - }, - }; -}; - -const defaultOptions = (locale: string) => { - return { - chart: { - zoomType: 'x', - type: 'StockChart', - spacingTop: 30, - //spacingRight: 55, - }, - navigator: { - enabled: false, - }, - rangeSelector: { - enabled: false, - }, - scrollbar: { - enabled: false, - }, - credits: { - enabled: false, - }, - title: { - text: '', - }, - subtitle: { - text: '', - }, - xAxis: { - ordinal: true, - type: 'datetime', - lineWidth: 0.5, - opposite: false, - labels: { - format: '{value:%Y-%b-%e %l:%M %p }', - }, - }, - yAxis: { - opposite: false, - title: { - text: '', - }, - /* Doesn't work before upgrade. - labels: { - x: 0, - y: 10, - align: 'right', - }, - */ - }, - annotations: [annotations(locale)], - legend: { - enabled: false, - }, - tooltip: { - crosshairs: { - width: 1, - zIndex: 2, - }, - shadow: false, - borderWidth: 0, - }, - plotOptions: { - area: { - marker: { - lineWidth: 16, - radius: 7, - }, - lineWidth: 2, - states: { - hover: { - lineWidth: 2, - }, - }, - events: {}, - threshold: null, - }, - series: { - marker: { - zIndex: 100, - enabledThreshold: 50, - }, - }, - }, - series: [ - { - type: 'area', - data: [], - }, - ], - }; -}; diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.scss b/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.scss deleted file mode 100644 index 5d4e87f30f..0000000000 --- a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -:host { - display: block; -} diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.spec.ts b/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.spec.ts deleted file mode 100644 index f53f8c0ff0..0000000000 --- a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; - -import { stockChartDeprecatedOptions } from './options/stock-chart-deprecated-options'; -import { StockChartDeprecatedComponent } from './stock-chart-deprecated.component'; - -describe('StockChartDeprecatedComponent', () => { - let component: StockChartDeprecatedComponent; - let fixture: ComponentFixture; - - const expectedDefaultHeight = 300; - - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [StockChartDeprecatedComponent], - }).compileComponents(); - }) - ); - - beforeEach(() => { - fixture = TestBed.createComponent(StockChartDeprecatedComponent); - component = fixture.componentInstance; - component.options = stockChartDeprecatedOptions('da', expectedDefaultHeight); - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - it('should have correct default height input', () => { - expect(component.height).toBe(expectedDefaultHeight); - }); -}); diff --git a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.ts b/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.ts deleted file mode 100644 index 78e0e41f90..0000000000 --- a/libs/designsystem/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { Component, ElementRef, Inject, Input, LOCALE_ID } from '@angular/core'; -import { Options } from 'highcharts'; -import * as Highcharts from 'highcharts/highstock'; -import AnnotationsModule from 'highcharts/modules/annotations'; - -import { - annotations, - StockChartDeprecatedDataPoint, -} from './options/stock-chart-deprecated-options'; - -// @ts-ignore -AnnotationsModule(Highcharts); - -@Component({ - selector: 'kirby-stock-chart-deprecated', - template: '', - styleUrls: ['./stock-chart-deprecated.component.scss'], -}) -export class StockChartDeprecatedComponent { - chartContainer: ElementRef; - private _data: StockChartDeprecatedDataPoint[]; - @Input() set data(val: StockChartDeprecatedDataPoint[]) { - this.onDataChanges(val); - } - get data() { - return this._data; - } - private _options: Options; - @Input() set options(val: Options) { - this.onOptionsChanges(val); - } - get options() { - return this._options; - } - private _height = 300; - @Input() set height(height: number) { - this._height = height; - if (this.chart) { - this.chart.setSize(null, height); - } - } - get height() { - return this._height; - } - @Input() description = ''; - @Input() showDataLabels = true; - - chart: Highcharts.Chart; - - constructor(hostElement: ElementRef, @Inject(LOCALE_ID) private locale: string) { - this.chartContainer = hostElement; - } - - onOptionsChanges(options: Options) { - this._options = options; - this.chart = Highcharts.stockChart(this.chartContainer.nativeElement, this._options); - } - - onDataChanges(data: StockChartDeprecatedDataPoint[]) { - this._data = data; - - if (this.chart != null) { - // First delete all points in the previous series. - this.chart.update( - { - series: [], - }, - false, - true - ); - // Remove the annotations. - this.chart.removeAnnotation('minmax'); - // Then update the chart with new series data. - this.chart.update( - { - series: [ - { - type: 'area', - data: data, - }, - ], - }, - false, - true - ); - // Add the new annotations. - this.chart.addAnnotation(annotations(this.locale), false); - // And finally redraw the graph with all the changes. - this.chart.redraw(); - } - } -} diff --git a/libs/designsystem/src/lib/kirby.module.ts b/libs/designsystem/src/lib/kirby.module.ts index 7c463a9d50..5e3b9a01d8 100644 --- a/libs/designsystem/src/lib/kirby.module.ts +++ b/libs/designsystem/src/lib/kirby.module.ts @@ -12,7 +12,6 @@ import { CalendarComponent } from './components/calendar/calendar.component'; import { CardFooterComponent } from './components/card/card-footer/card-footer.component'; import { CardHeaderComponent } from './components/card/card-header/card-header.component'; import { CardComponent } from './components/card/card.component'; -import { ChartDeprecatedComponent } from './components/chart-deprecated/chart-deprecated.component'; import { ChartModule } from './components/chart/chart.module'; import { CheckboxComponent } from './components/checkbox/checkbox.component'; import { ChipComponent } from './components/chip/chip.component'; @@ -64,7 +63,6 @@ import { ResizeObserverService } from './components/shared/resize-observer/resiz import { SlideButtonComponent } from './components/slide-button/slide-button.component'; import { SlideDirective, SlidesComponent } from './components/slides/slides.component'; import { SpinnerModule } from './components/spinner/spinner.module'; -import { StockChartDeprecatedComponent } from './components/stock-chart-deprecated/stock-chart-deprecated.component'; import { TabsModule } from './components/tabs/tabs.module'; import { ToastController } from './components/toast/services/toast.controller'; import { ToastHelper } from './components/toast/services/toast.helper'; @@ -82,8 +80,6 @@ const exportedDeclarations = [ CardHeaderComponent, CardFooterComponent, ButtonComponent, - ChartDeprecatedComponent, - StockChartDeprecatedComponent, GridComponent, ComponentLoaderDirective, AvatarComponent, diff --git a/libs/designsystem/testing-base/src/lib/components/mock.chart-deprecated.component.ts b/libs/designsystem/testing-base/src/lib/components/mock.chart-deprecated.component.ts deleted file mode 100644 index eadfe415fd..0000000000 --- a/libs/designsystem/testing-base/src/lib/components/mock.chart-deprecated.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Component, forwardRef, Input } from '@angular/core'; -import { Options, XAxisBreaksOptions } from 'highcharts'; - -import { ChartDeprecatedComponent, ChartDeprecatedType } from '@kirbydesign/designsystem'; - -// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN! -@Component({ - selector: 'kirby-chart-deprecated', - template: '', - providers: [ - { - provide: ChartDeprecatedComponent, - useExisting: forwardRef(() => MockChartDeprecatedComponent), - }, - ], -}) -export class MockChartDeprecatedComponent { - @Input() data: []; - @Input() categories: string[]; - @Input() breaks: Array; - @Input() height: number; - @Input() type: ChartDeprecatedType; - @Input() description: string; - @Input() showDataLabels: boolean; - @Input() options: Options; -} - -// #endregion diff --git a/libs/designsystem/testing-base/src/lib/mock-components.ts b/libs/designsystem/testing-base/src/lib/mock-components.ts index 6cfa21cd44..bab454cb67 100644 --- a/libs/designsystem/testing-base/src/lib/mock-components.ts +++ b/libs/designsystem/testing-base/src/lib/mock-components.ts @@ -9,7 +9,6 @@ import { MockCalendarComponent } from './components/mock.calendar.component'; import { MockCardFooterComponent } from './components/mock.card-footer.component'; import { MockCardHeaderComponent } from './components/mock.card-header.component'; import { MockCardComponent } from './components/mock.card.component'; -import { MockChartDeprecatedComponent } from './components/mock.chart-deprecated.component'; import { MockChartComponent } from './components/mock.chart.component'; import { MockCheckboxComponent } from './components/mock.checkbox.component'; import { MockChipComponent } from './components/mock.chip.component'; @@ -74,7 +73,6 @@ export const MOCK_COMPONENTS = [ MockCardHeaderComponent, MockCardComponent, MockChartComponent, - MockChartDeprecatedComponent, MockCheckboxComponent, MockChipComponent, MockDividerComponent, diff --git a/package-lock.json b/package-lock.json index c941f6fdbb..dae03e7800 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8089,12 +8089,6 @@ "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.1.4.tgz", "integrity": "sha512-lQ+FF7xUxxRuRqIY7H/lagnT3PhhSnnvtGHzjE5WZKwRyLU7glJfLys05SZ7zHlEr6RXWiqkmgWq4nCkcElR+g==" }, - "date-format": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/date-format/-/date-format-3.0.0.tgz", - "integrity": "sha512-eyTcpKOcamdhWJXj56DpQMo1ylSQpcGtGKXcU0Tb97+K56/CF5amAqqqNj0+KvA0iw2ynxtHWFsPDSClCxe48w==", - "dev": true - }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -10613,11 +10607,6 @@ "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "dev": true }, - "highcharts": { - "version": "8.0.4", - "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.0.4.tgz", - "integrity": "sha512-RD86/w7VNwuY96c2Pv16dtZujJ4vg5viiVjbFF/TCrvFpmtQRzBIECG90ww0JtiK6+6TKlwCYf0an+kgQshnRw==" - }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -21797,25 +21786,6 @@ "integrity": "sha1-Rb8dny19wJvtgfHDB8Qw5ouEz/4=", "dev": true }, - "streamroller": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-2.2.4.tgz", - "integrity": "sha512-OG79qm3AujAM9ImoqgWEY1xG4HX+Lw+yY6qZj9R1K2mhF5bEmQ849wvrb+4vt4jLMLzwXttJlQbOdPOQVRv7DQ==", - "dev": true, - "requires": { - "date-format": "^2.1.0", - "debug": "^4.1.1", - "fs-extra": "^8.1.0" - }, - "dependencies": { - "date-format": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz", - "integrity": "sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA==", - "dev": true - } - } - }, "string-argv": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz", diff --git a/package.json b/package.json index a5e414c4fe..8f69934070 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,6 @@ "date-fns": "2.21.1", "date-fns-tz": "1.1.4", "firebase": "8.3.1", - "highcharts": "8.0.4", "include-media": "^1.4.10", "inputmask": "^5.0.5", "prismjs": "1.25.0", diff --git a/readme.md b/readme.md index b9c0e9c792..bd377a674d 100644 --- a/readme.md +++ b/readme.md @@ -336,10 +336,6 @@ Finally, add the following to `index.html` : _**Please note:** If you don't want the additional http request for the polyfill loader, you can copy the contents of `node_modules/@kirbydesign/designsystem/polyfills/resize-observer-polyfill-loader.js` into a `script` tag in `index.html` instead_ -## Chart Components - -The Kirby chart components use Highcharts. Note that this is a licensed product. - [angular]: https://angular.io [jasmine]: https://jasmine.github.io/ [jest]: https://jestjs.io/