@kiwibit/chart 18.0.2 → 20.0.0

package/CHANGELOG.md

@@ -0,0 +1,164 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [19.0.0] - 2025-01-23
+
+### Added
+
+- Upgrade to Angular 19.
+
+## [18.0.0] - 2024-11-29
+
+### Added
+
+- Upgrade to Angular 18.
+
+## [17.0.1] - 2024-03-22
+
+### Added
+
+- Created a custom Angular directive to render the chart through the echarts library.
+
+### Changed
+
+- Replaced chart icons in the toolbox with Material Icons svgs.
+
+### Removed
+
+- Removed ngx-echarts dependency.
+
+## [17.0.0] - 2024-03-21
+
+### Added
+
+- Upgrade to Angular 17.
+
+## [16.0.0] - 2024-03-05
+
+### Added
+
+- Upgrade to Angular 16.
+
+## [15.0.1] - 2022-11-30
+
+### Added
+
+- Added initial chart configuration if not passed as an input to the chart, in order to suppress the echarts warning.
+
+## [15.0.0] - 2022-11-30
+
+### Added
+
+- Upgrade to Angular 15
+
+## [14.0.0] - 2022-11-30
+
+### Added
+
+- Upgrade to Angular 14
+
+## [1.0.13] - 2022-06-29
+
+### Added
+
+- Added "chartHover" Output property to emit the x and y coordinates when the cursor is hovering the chart area.
+- Added opacity property in the Trace model.
+  
+## [1.0.12] - 2022-06-14
+
+### Added
+
+- Added animation duration in the chart model (as optional).
+- Added maxAxesDecimals in the chart model (as optional).
+  
+### Changed
+
+- Changed width of the chart in the grid option (to make the legend more readable when there's less space).
+
+## [1.0.11] - 2022-06-09
+
+### Added
+
+- Added min and max values (as optional) for the x and y coordinate of the chart.
+
+### Changed 
+
+- Minor fixes in the chart legend (increased width and changed inactive color for the dark theme).
+
+## [1.0.10] - 2022-06-08
+
+### Added
+
+- Re-introduced manual change detection in the chart component.
+- Added two different "Add Point" icons for both the light and dark theme.
+
+## [1.0.9] - 2022-05-31
+
+### Changed
+
+- Minor changes to the chart rendering logic.
+
+### Removed
+
+- Removed manual change detection in the chart component.
+
+## [1.0.7] - 2022-05-31
+
+### Added
+
+- Added Dark Theme for the chart.
+- Added documentation for the Chart's models and component.
+
+## [1.0.4] - 2022-03-30
+
+### Added
+
+- Added color property for the popints in a Trace.
+
+## [1.0.3] - 2022-03-29
+
+### Added
+
+- Added a property in the Chart to choose if show the grid lines or not.
+
+### Changed
+
+- Changed the grid lines default color to #ccc.  
+ 
+### Removed
+
+- Removed the automatic add of a point in the chart when clicking on add point control button. We just pass the data to father component which then decides whether to add a point or not.
+- Removed point name from tooltip.
+
+## [1.0.2] - 2022-03-28
+
+### Changed
+
+- scrollToZoom and clickToAddPoint are now optional and by default set to false.
+
+### Fixed
+
+- Rounded number to 3 decimals in the point tooltip.
+
+### Removed
+
+- Removed restore option in the toolbox.
+
+## [1.0.1] - 2022-03-28
+
+### Added
+
+- Added property in the Trace model to make a Trace not selected in the legend by default.
+
+### Changed
+
+- Changed Unit of Measure format in the Axes labels.
+- Changed default symbol of a Point.
+
+## [1.0.0] - 2022-03-25
+
+### Added
+
+- First release of the kiwi-chart (version 1.0.0).

package/README.md

@@ -4,6 +4,8 @@ This project is an Angular library designed to simplify the process of 2D charts
 
 ### Latest versions @npm:
 
+> **v19.x** for Angular >= **19.x**
+> 
 > **v18.x** for Angular >= **18.x**
 > 
 > **v17.x** for Angular >= **17.x**
@@ -59,6 +61,12 @@ npm install @kiwibit/chart
 
 # Latest Updates
 
+## [19.0.0] - 2025-01-23
+
+### Added
+
+- Upgrade to Angular 19.
+
 ## [18.0.2] - 2024-12-02
 
 ### Fixed

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/kiwibit/chart'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/kiwibit/chart",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "echarts"
+  ]
+}

package/package.json

@@ -1,27 +1,16 @@
-{
-  "name": "@kiwibit/chart",
-  "version": "18.0.2",
-  "peerDependencies": {
-    "@angular/common": "^18.2.13",
-    "@angular/core": "^18.2.13"
-  },
-  "dependencies": {
-    "echarts": "^5.5.1",
-    "tslib": "^2.3.0"
-  },
-  "licence": "MIT",
-  "module": "fesm2022/kiwibit-chart.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/kiwibit-chart.mjs",
-      "esm": "./esm2022/kiwibit-chart.mjs",
-      "default": "./fesm2022/kiwibit-chart.mjs"
-    }
-  },
-  "sideEffects": false
+{
+  "name": "@kiwibit/chart",
+  "version": "20.0.0",
+  "engines": {
+    "node": "^18.19.1 || ^20.11.1 || ^22.0.0"
+  },
+  "peerDependencies": {
+    "@angular/common": "^20.2.14",
+    "@angular/core": "^20.2.14"
+  },
+  "dependencies": {
+    "echarts": "^5.6.0",
+    "tslib": "^2.3.0"
+  },
+  "licence": "MIT"
 }

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

@@ -0,0 +1,76 @@
+// Angular General
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+// Kiwi Chart
+import { Chart, BasePoint } from '../models/chart.models';
+import { KiwiChartDirective } from '../directives/kiwi-chart.directive';
+
+@Component({
+    selector: 'kiwi-chart',
+    template: `
+    <div 
+      kiwi-chart 
+      [chart]="chart" 
+      [width]="width"
+      [height]="height"
+      [darkTheme]="darkTheme"
+      [darkThemeBackground]="darkThemeBackground"
+      (addPoint)="addPoint.emit($event)"
+      (chartHover)="chartHover.emit($event)"
+    ></div> 
+  `,
+    styles: [``],
+    imports: [KiwiChartDirective]
+})
+export class KiwiChartComponent {
+
+  /**
+   * The Chart Object rendered by the canvas. For all the available options refer 
+   * to Chart interface in the models folder.
+   *
+   * @type {(Chart | null)}
+   * @memberof KiwiChartComponent
+   */
+  @Input({ required: true }) chart: Chart | null = null;
+
+  /**
+   * Width and Height of the chart area. The dimensions refer to the father component 
+   * into which the kiwi-chart is inserted. For example in an empty page the width/height 
+   * of the chart can take the whole available space in the page.
+   *
+   * @type {string}
+   * @memberof KiwiChartComponent
+   */
+  @Input() width: string = '100%';
+  @Input() height: string = '480px';
+
+  /**
+   * This property simply activates or not the dark theme of the chart
+   * defined by the Echarts library. In addition the background color can be custom
+   * so that the chart can match the background of the application in which it's used.
+   *
+   * @type {boolean}
+   * @memberof KiwiChartComponent
+   */
+  @Input() darkTheme: boolean = false;
+  @Input() darkThemeBackground: string | null = null;
+
+  /**
+   * Output event used to emit to the father component the coordinates
+   * of the point clicked in the chart area. This functionality to be used must
+   * have the property "clickToAddPoint" in the Chart object set to true.
+   *
+   * @type {EventEmitter<BasePoint>}
+   * @memberof KiwiChartComponent
+   */
+  @Output() addPoint: EventEmitter<BasePoint> = new EventEmitter<BasePoint>();
+
+  /**
+   * When the cursor hovers the chart area it emits to the father component the
+   * x and y coordinates relative to the chart reference system.
+   *
+   * @type {EventEmitter<BasePoint>}
+   * @memberof KiwiChartComponent
+   */
+  @Output() chartHover: EventEmitter<BasePoint> = new EventEmitter<BasePoint>();
+
+}

package/src/lib/constants/chart.constants.ts

@@ -0,0 +1,5 @@
+export const ZOOM_IN: string = "M39.35 40.45 26.6 27.7q-1.55 1.35-3.6 2.025-2.05.675-4 .675-4.9 0-8.225-3.325Q7.45 23.75 7.45 18.9q0-4.9 3.325-8.225Q14.1 7.35 18.95 7.35q4.85 0 8.225 3.325t3.375 8.175q0 2.1-.725 4.1-.725 2-2.025 3.45l12.8 12.75ZM19 28.65q4.15 0 6.975-2.8 2.825-2.8 2.825-7 0-4.15-2.825-6.95T19 9.1q-4.2 0-7 2.8t-2.8 6.95q0 4.2 2.8 7t7 2.8Zm-.9-5.1V19.7h-3.85v-1.75h3.85v-3.8h1.75v3.8h3.8v1.75h-3.8v3.85Z";
+export const ZOOM_OUT: string = "M41.25 39.35 29.55 27.7q-1.5 1.25-3.525 1.975Q24 30.4 22.05 30.4q-2.1 0-3.975-.725T14.9 27.65l1.2-1.2q1.2 1.1 2.65 1.65 1.45.55 3.25.55 4.2 0 7-2.8t2.8-7q0-4.15-2.8-6.95t-7-2.8q-4.15 0-7 2.8-2.85 2.8-2.75 6.95l3.2-3.4 1.3 1.3-5.35 5.35-5.3-5.35 1.3-1.3 3.05 3.3q0-4.85 3.4-8.125Q17.25 7.35 22 7.35q4.9 0 8.225 3.325Q33.55 14 33.55 18.85q0 2.1-.75 4.1-.75 2-1.95 3.45L42.5 38.05Z";
+export const SAVE_AS_SVG: string = "M11.3 40.05q-1.35 0-2.35-1t-1-2.35V11.3q0-1.4 1-2.375 1-.975 2.35-.975h25.4q1.4 0 2.375.975.975.975.975 2.375v25.4q0 1.35-.975 2.35t-2.375 1Zm0-1.75h25.4q.6 0 1.1-.5.5-.5.5-1.1V11.3q0-.6-.5-1.1-.5-.5-1.1-.5H11.3q-.6 0-1.1.5-.5.5-.5 1.1v25.4q0 .6.5 1.1.5.5 1.1.5Zm4.1-5.15h17.65l-5.5-7.3-5.2 6.45-3.3-3.85ZM9.7 38.3V9.7v28.6Z";
+export const RESTORE: string = "M24.2 25.65q-.65 0-1.125-.475T22.6 24q0-.7.475-1.2t1.175-.5q.65 0 1.175.525T25.95 24q0 .7-.55 1.175-.55.475-1.2.475Zm.1 14.55q-6.4 0-11.1-4.25Q8.5 31.7 8.1 25.4h1.8q.5 5.55 4.6 9.3 4.1 3.75 9.75 3.75 6.05 0 10.225-4.225T38.65 24.05q0-6.05-4.2-10.275Q30.25 9.55 24.3 9.55q-3.2 0-6.025 1.3t-4.875 3.6h4.95v1.75H10.4v-8h1.75v5.05q2.25-2.6 5.475-4.025Q20.85 7.8 24.3 7.8q3.3 0 6.225 1.25t5.125 3.475q2.2 2.225 3.475 5.175Q40.4 20.65 40.4 24q0 3.35-1.275 6.3-1.275 2.95-3.475 5.175-2.2 2.225-5.125 3.475T24.3 40.2Z";
+export const ADD_POINT: string = "M222.895-189.538q-22.456 0-37.906-15.451-15.451-15.45-15.451-37.906v-474.21q0-22.456 15.451-37.906 15.45-15.451 38.088-15.451h322.346v28.924H223.077q-10.769 0-17.692 6.923t-6.923 17.692v473.846q0 10.769 6.923 17.692t17.692 6.923h473.846q10.77 0 17.693-6.923 6.923-6.923 6.923-17.692v-322.346h28.923v322.346q0 22.638-15.451 38.088-15.45 15.451-37.906 15.451h-474.21Zm78.028-121.539h28.923v-243.077h-28.923v243.077Zm144.923 0h28.923v-337.846h-28.923v337.846Zm144.308 0h28.923v-148.308h-28.923v148.308Zm100-327.692v-71.385h-71.385v-28.923h71.385v-71.385h28.923v71.385h71.385v28.923h-71.385v71.385h-28.923ZM460-480Z";