@kiwibit/chart 20.0.0 → 21.0.0

package/src/lib/directives/kiwi-chart.directive.ts

@@ -1,488 +0,0 @@
-// Angular Imports
-import { AfterViewInit, Directive, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-// Kiwi Chart Imports
-import { BasePoint, Chart, Point, Shape, ShapeVariant, Trace } from '../models/chart.models';
-import { ADD_POINT, RESTORE, SAVE_AS_SVG, ZOOM_IN, ZOOM_OUT } from '../constants/chart.constants';
-// Echarts Imports
-import * as echarts from 'echarts/core';
-import {
-  ComposeOption,
-  CustomSeriesOption,
-  LegendComponentOption,
-  LineSeriesOption,
-  ScatterSeriesOption,
-  ToolboxComponentOption
-} from 'echarts/types/dist/shared'; 
-import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, ToolboxComponent, TitleComponentOption, TooltipComponentOption, GridComponentOption, DatasetComponentOption } from 'echarts/components';
-import { LineChart, ScatterChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LineChart,
-  ScatterChart,
-  CanvasRenderer,
-  LegendComponent,
-  DataZoomComponent,
-  ToolboxComponent,
-]);
-export type ECOption = ComposeOption<
-  | LineSeriesOption
-  | TitleComponentOption
-  | TooltipComponentOption
-  | GridComponentOption
-  | DatasetComponentOption
-  | LegendComponentOption
-  | ToolboxComponentOption
->;
-
-@Directive({
-  selector: 'div[kiwi-chart]',
-  standalone: true
-})
-export class KiwiChartDirective implements OnChanges, AfterViewInit {
-
-  /**
-   * The Chart Object rendered by the canvas. For all the available options refer 
-   * to Chart interface in the models folder.
-   *
-   * @type {(Chart | null)}
-   * @memberof KiwiChartDirective
-   */
-  @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 KiwiChartDirective
-   */
-  @Input() width: string = '100%';
-  @Input() height: string = '480px';
-
-  @Output() chartInit = new EventEmitter<echarts.ECharts>();
-
-  /**
-   * 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 KiwiChartDirective
-   */
-  @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 KiwiChartDirective
-   */
-  @Output() chartHover: EventEmitter<BasePoint> = new EventEmitter<BasePoint>();
-
-  /**
-   * 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 KiwiChartDirective
-   */
-  @Input() darkTheme: boolean = false;
-  @Input() darkThemeBackground: string | null = null;
-
-  /**
-   * The instance of the Chart.
-   *
-   * @type {ECharts}
-   * @memberof KiwiChartDirective
-   */
-  echartsInstance: echarts.ECharts | null = null;
-
-  /**
-   * Default number of decimals that can have
-   * the values on the x and y axes.
-   *
-   * @private
-   * @type {number}
-   * @memberof KiwiChartDirective
-   */
-  private readonly MAX_DECIMALS: number = 3;
-
-  private legendSelected: { [key: string]: boolean } = {};
-  private isLegendClicked: boolean = false;
-
-  /**
-   * Used to perform actions (as point addition based on the cursor position) on the chart.
-   *
-   * @type {(zrender.ZRenderType | null)}
-   * @memberof KiwiChartComponent
-   */
-  zr: echarts.zrender.ZRenderType | null = null;
-
-  /**
-  * If you resize the page, the chart is automatically re-rendered wiht the right proportions.
-  *
-  * @memberof EnchartingDirective
-  */
-  @HostListener('window:resize', ['$event'])
-  onResize() {
-    if (this.echartsInstance) {
-      this.echartsInstance.resize();
-    }
-  }
-
-  constructor(
-    private el: ElementRef<HTMLDivElement>
-  ) { }
-
-  ngAfterViewInit(): void {
-    if (this.chart) {
-      this.renderChart(this.chart);
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    let chart: Chart = changes['chart']?.currentValue;
-    if (this.echartsInstance) {
-      // Every time we have an external change we
-      // destroy the chart and re-initialize it
-      this.echartsInstance.dispose();
-      this.renderChart(chart);
-    }
-  }
-
-  renderChart(chart: Chart): void {
-    // Update ElementRef styles
-    this.el.nativeElement.style.width = this.width;
-    this.el.nativeElement.style.height = this.height;
-
-    this.echartsInstance = echarts.init(
-      this.el.nativeElement,
-      this.darkTheme ? 'dark' : 'default',
-      {
-        renderer: 'svg'
-      }
-    );
-
-    if (chart) {
-      this.echartsInstance.setOption({
-        title: {
-          text: chart.title,
-        },
-        grid: {
-          id: 0,
-          width: '70%'
-        },
-        backgroundColor: this.darkTheme ? this.darkThemeBackground ?? '#303030' : 'transparent', tooltip: {
-          axisPointer: {
-            type: 'cross',
-            crossStyle: {
-              color: '#bebebe'
-            }
-          }
-        },
-        toolbox: {
-          orient: 'horizontal',
-          left: 'center',
-          top: '25px',
-          feature: {
-            dataZoom: {
-              brushStyle: {
-                borderColor: '#000',
-                borderWidth: 1,
-                borderType: 'dashed'
-              },
-              emphasis: {
-                iconStyle: {
-                  textPosition: 'top',
-                  textPadding: 5
-                }
-              },
-              icon: {
-                zoom: ZOOM_IN,
-                back: ZOOM_OUT
-              },
-            },
-            saveAsImage: {
-              emphasis: {
-                iconStyle: {
-                  textPosition: 'top',
-                  textPadding: 5
-                }
-              },
-              icon: SAVE_AS_SVG,
-            },
-            restore: {
-              emphasis: {
-                iconStyle: {
-                  textPosition: 'top',
-                  textPadding: 5
-                }
-              },
-              icon: RESTORE,
-            },
-            myAddPoint: {
-              show: chart.clickToAddPoint ?? false,
-              title: chart.addPointCustomName ?? 'Add Point',
-              icon: ADD_POINT,
-              onclick: () => {
-                if (this.echartsInstance) {
-                  const option: ECOption = this.echartsInstance.getOption();
-                  const toolbox = option.toolbox as ToolboxComponentOption[];
-                  if (toolbox) {
-                    const status: boolean = toolbox[0].feature?.['myAddPoint']?.iconStatus;
-                    const offColor: string = 'rgb(102,102,102)';
-                    const highlightColor: string = 'rgb(62,152,197)';
-                    this.echartsInstance.setOption({
-                      toolbox: {
-                        feature: {
-                          myAddPoint: {
-                            iconStatus: !status,
-                            iconStyle: {
-                              borderColor: !status ? highlightColor : offColor
-                            }
-                          }
-                        }
-                      }
-                    });
-                  }
-                }
-              },
-              emphasis: {
-                iconStyle: {
-                  textPosition: 'top',
-                  textPadding: 5
-                }
-              }
-            }
-          },
-        },
-        dataZoom: [
-          {
-            type: 'inside',
-            xAxisIndex: [0],
-            throttle: 0,
-            filterMode: 'none',
-            disabled: !chart.scrollToZoom
-          },
-          {
-            type: 'inside',
-            yAxisIndex: [0],
-            throttle: 0,
-            filterMode: 'none',
-            disabled: !chart.scrollToZoom
-          },
-        ],
-        legend: {
-          inactiveColor: this.darkTheme ? '#8b8b8b' : '#ccc',
-          data: chart.shapes.map(
-            (shape: Shape) => ({
-              name: shape.name,
-              icon: 'circle',
-            })
-          ),
-          selected: chart.shapes.reduce(
-            (accumulator, shape: Shape) => ({
-              ...accumulator,
-              [shape.name as string]: this.getLegendItemSelection(shape),
-            }),
-            {}),
-          show: chart.showLegend ?? false,
-          orient: 'vertical',
-          left: 'right',
-          padding: [60, 20],
-          type: 'scroll',
-          textStyle: {
-            width: 120,
-            fontWeight: 'bold',
-            overflow: 'break'
-          }
-        },
-        xAxis: {
-          type: chart.xAxisType,
-          name: chart.xAxisUom ? `${chart.xAxisName} [ ${chart.xAxisUom} ]` : chart.xAxisName,
-          nameLocation: 'middle',
-          nameGap: 30,
-          splitLine: {
-            show: chart.showGrid ?? true,
-            lineStyle: {
-              color: this.darkTheme ? '#595959' : '#ccc'
-            }
-          },
-          min: chart.xMin?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
-          max: chart.xMax?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
-        },
-        yAxis: {
-          type: chart.yAxisType,
-          name: chart.yAxisUom ? `${chart.yAxisName} [ ${chart.yAxisUom} ]` : chart.yAxisName,
-          nameLocation: 'middle',
-          nameGap: 50,
-          splitLine: {
-            show: chart.showGrid ?? true,
-            lineStyle: {
-              color: this.darkTheme ? '#595959' : '#ccc'
-            }
-          },
-          min: chart.yMin?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
-          max: chart.yMax?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
-        },
-        series: this.createSeries(chart.shapes),
-        animation: chart.hasAnimations,
-        animationDuration: chart.animationDuration ?? 250,
-        animationEasing: 'cubicOut'
-      },
-        true,
-        true
-      );
-    }
-
-    this.setupZrEventHandler(this.echartsInstance);
-
-    this.setupLegendEventHandler(this.echartsInstance);
-  }
-
-  createSeries(shapes: Shape[]): Array<LineSeriesOption | CustomSeriesOption | ScatterSeriesOption> {
-    let series: Array<LineSeriesOption | CustomSeriesOption | ScatterSeriesOption> = [];
-    shapes.forEach(
-      (shape: Shape) => {
-        switch (shape.variant) {
-          case ShapeVariant.TRACE:
-            series.push(this.createTrace(shape as Trace))
-            break;
-          default:
-            break;
-        }
-      }
-    );
-    return series;
-  }
-
-  createTrace(trace: Trace): LineSeriesOption | ScatterSeriesOption {
-    return {
-      type: trace.type,
-      name: trace.name,
-      data: trace.points.map(
-        (point: Point) => ({
-          value: [point.x, point.y],
-          symbol: point.symbol ?? 'circle',
-          name: point.name,
-          symbolSize: point.symbolSize ?? 2,
-          itemStyle: {
-            color: point.color
-          },
-          emphasis: {
-            disabled: true
-          },
-          label: {
-            show: true,
-            position: 'bottom',
-            align: 'left',
-            verticalAlign: 'bottom',
-            formatter: () => `${point.name ?? ''}`,
-            fontSize: 13,
-            padding: [0, 0, 0, 10],
-            width: 100,
-            overflow: 'truncate',
-            ellipsis: '...',
-            fontWeight: 'bold',
-            color: this.darkTheme ? '#fff' : '#000'
-          },
-          tooltip: {
-            formatter: ({ value }: { value: number[] }) => `
-              <strong>${this.chart?.xAxisName}:</strong> ${value[0].toFixed(3).replace(/[.,]000$/, "")}
-              <br>
-              <strong>${this.chart?.yAxisName}:</strong> ${value[1].toFixed(3).replace(/[.,]000$/, "")}
-            `
-          }
-        })
-      ),
-      color: trace.color,
-      lineStyle: {
-        width: trace.width,
-        type: trace.style,
-        opacity: trace.opacity ?? 1
-      },
-      smooth: trace.smooth ?? false
-    };
-  }
-
-  getLegendItemSelection(shape: Shape): boolean {
-    if (this.isLegendClicked) {
-      return this.legendSelected[shape.name as string] ?? true;
-    }
-    else {
-      return shape.selectedByDefault ?? true
-    }
-  }
-
-  /**
-   * intercept a selection change event on the legend and save the state 
-   * of all selections on the supporting variable legendSelected
-   * 
-   * @param ec 
-   */
-  setupLegendEventHandler(ec: echarts.ECharts) {
-    if (this.echartsInstance != null) {
-      this.echartsInstance.on('legendselectchanged', (params: any) => {
-        this.isLegendClicked = true;
-        this.legendSelected = params.selected;
-      });
-    }
-
-  }
-
-  setupZrEventHandler(ec: echarts.ECharts) {
-    this.zr = ec.getZr();
-    /** 
-     * Intercepts the click event on the chart (if the clickToAddPoint property is set to true)
-     * and emits the point coordinates to the father component.
-     */
-    this.zr.on('click', params => {
-      let option: any = ec.getOption();
-      let active = option?.toolbox?.[0]?.feature?.myAddPoint?.iconStatus;
-      if (active && this.chart?.clickToAddPoint) {
-        const pointInPixel = [params.offsetX, params.offsetY];
-        const pointInGrid = ec.convertFromPixel({gridId: 0}, pointInPixel);
-        if (ec.containPixel({gridId: 0}, pointInPixel) && pointInGrid) {
-          let newPoint: { x: number, y: number } = {
-            x: +pointInGrid[0].toFixed(3),
-            y: +pointInGrid[1].toFixed(3)
-          };
-          this.addPoint.emit(newPoint);
-        }
-      }
-    });
-    /** 
-     * This is used perform custom actions when the mouse is hovering the chart area
-     */
-    this.zr.on('mousemove', params => {
-      const pointInPixel = [params.offsetX, params.offsetY];
-      const pointInGrid = ec.convertFromPixel('grid', pointInPixel);
-      /* 
-       * Logic to emit to the father component the x and y cdinates when the
-       * cursor is hovering the chart area .
-       */
-      if (ec.containPixel('grid', pointInPixel) && pointInGrid) {
-        let newPoint: { x: number, y: number } = {
-          x: +pointInGrid[0].toFixed(3),
-          y: +pointInGrid[1].toFixed(3)
-        };
-        this.chartHover.emit(newPoint);
-      }
-      /* Logic to change the cursor icon when the "Click to Add Point" feature is active and viceversa. */
-      const option: any = ec.getOption();
-      const addPointIsActive = option?.toolbox?.[0]?.feature?.myAddPoint?.iconStatus;
-      if (addPointIsActive) {
-        this.zr?.setCursorStyle(
-          ec.containPixel('grid', pointInPixel) ? 'copy' : 'default'
-        );
-      }
-    });
-  }
-
-}

package/src/public-api.ts

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of chart
- */
-
-export * from './lib/components/chart.component';
-export * from './lib/models/chart.models';

package/src/test.ts

@@ -1,15 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}