@tetacom/svg-charts 1.0.2 → 1.1.3

package/src/chart/chart-container/tooltip/tooltip.component.ts

@@ -1,134 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { filter, map, merge, Observable, takeWhile, tap } from 'rxjs';
-import { ChartService } from '../../service/chart.service';
-import { ZoomService } from '../../service/zoom.service';
-import { IChartEvent } from '../../model/i-chart-event';
-import { IDisplayTooltip } from '../../model/i-display-tooltip';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Component({
-  selector: 'teta-tooltip',
-  templateUrl: './tooltip.component.html',
-  styleUrls: ['./tooltip.component.scss'],
-})
-export class TooltipComponent implements OnInit, OnDestroy {
-  @Input() size: DOMRect;
-
-  position: Observable<{
-    left: string;
-    top: string;
-    bottom: string;
-    right: string;
-  }>;
-
-  displayTooltips: Observable<string>;
-
-  tooltips = [];
-
-  private alive = true;
-
-  display: Observable<number>;
-
-  constructor(
-    private svc: ChartService,
-    private cdr: ChangeDetectorRef,
-    private zoomService: ZoomService,
-    private sanitizer: DomSanitizer
-  ) {}
-
-  ngOnInit(): void {
-    this.display = merge(this.svc.pointerMove, this.zoomService.zoomed).pipe(
-      map(({ event }) => {
-        const opacity = event?.type === 'mousemove' ? 1 : 0;
-
-        return opacity;
-      }),
-      tap(() => {
-        requestAnimationFrame(() => {
-          this.cdr.detectChanges();
-        });
-      })
-    );
-
-    this.position = this.svc.pointerMove.pipe(
-      filter(({ event }) => event),
-      map((_) => {
-        return this.getPoisition(_);
-      }),
-      tap((_) => this.cdr.detectChanges())
-    );
-
-    const transformHtml = (html) => {
-      return this.sanitizer.bypassSecurityTrustHtml(html);
-    };
-
-    const defaultFormatter = (tooltips: IDisplayTooltip[]) => {
-      let html = '';
-
-      tooltips.forEach((_) => {
-        const indicatorStyle = `display:block; width: 10px; height: 2px; background-color: ${_?.series?.color}`;
-
-        html += `<div class="display-flex align-center"><span class="margin-right-1" style="${indicatorStyle}"></span>
-          <span class="font-title-3">${_.series.name}
-          <span class="font-body-3">x: ${_.point.x?.toFixed(
-            2
-          )} y: ${_.point.y?.toFixed(2)}</span></span></div>`;
-      });
-
-      return transformHtml(html);
-    };
-
-    const formatter = this.svc.config?.tooltip?.format;
-
-    this.displayTooltips = merge(
-      this.svc.pointerMove.pipe(tap((_) => (this.tooltips = []))),
-      this.svc.tooltips
-    ).pipe(
-      takeWhile((_) => this.alive),
-      filter((_) => !_['event']),
-      map((tooltip: any) => {
-        if (tooltip) {
-          this.tooltips.push(tooltip);
-        }
-
-        const formatted = formatter
-          ? formatter(this.tooltips)
-          : defaultFormatter(this.tooltips);
-
-        return formatted;
-      })
-    );
-  }
-
-  private getPoisition({ event }: any) {
-    const centerX = this.size.width / 2;
-    const centerY = this.size.height / 2;
-
-    const padding = { x: 10, y: 10 };
-
-    const scene = {
-      left: event.pageX > centerX ? 'initial' : `${event.pageX + padding.x}px`,
-      top: event.pageY > centerY ? 'initial' : `${event.pageY + padding.y}px`,
-      bottom:
-        event.pageY > centerY
-          ? `${window.innerHeight - event.pageY}px`
-          : 'initial',
-      right:
-        event.pageX > centerX
-          ? `${window.innerWidth - event.pageX + padding.x}px`
-          : 'initial',
-    };
-
-    return scene;
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
-}

package/src/chart/chart-container/x-axis/x-axis.component.html

@@ -1 +0,0 @@
-<svg:g #svg></svg:g>

package/src/chart/chart-container/x-axis/x-axis.component.scss

@@ -1,3 +0,0 @@
-:host .tick {
-  stroke: var(--color-text-20);
-}

package/src/chart/chart-container/x-axis/x-axis.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { XAxisComponent } from './x-axis.component';
-
-describe('XAxisComponent', () => {
-  let component: XAxisComponent;
-  let fixture: ComponentFixture<XAxisComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ XAxisComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(XAxisComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/chart/chart-container/x-axis/x-axis.component.ts

@@ -1,80 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { Axis } from '../../core/axis/axis';
-import { ScaleService } from '../../service/scale.service';
-import { ChartService } from '../../service/chart.service';
-import * as d3 from 'd3';
-import { ZoomService } from '../../service/zoom.service';
-import { concat, map, merge, takeWhile, tap } from 'rxjs';
-
-@Component({
-  selector: '[teta-x-axis]',
-  templateUrl: './x-axis.component.html',
-  styleUrls: ['./x-axis.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class XAxisComponent implements OnInit, OnDestroy, AfterViewInit {
-  @Input() axis: Axis;
-  @Input() size: DOMRect;
-  @ViewChild('svg') node: ElementRef;
-
-  private _alive = true;
-
-  constructor(
-    private scaleService: ScaleService,
-    private chartService: ChartService,
-    private cdr: ChangeDetectorRef,
-    private zoomService: ZoomService
-  ) {
-    merge(this.zoomService.zoomed, this.chartService.size)
-      .pipe(
-        takeWhile(() => this._alive),
-        tap((_) => {
-          this.draw();
-          this.cdr.detectChanges();
-        })
-      )
-      .subscribe();
-  }
-
-  ngOnInit(): void {}
-
-  ngOnDestroy(): void {
-    this._alive = false;
-  }
-
-  ngAfterViewInit() {
-    this.draw();
-  }
-
-  private draw() {
-    const scale = this.scaleService.xScales.get(this.axis.index);
-
-    const axis = this.axis.options.opposite
-      ? d3
-          .axisTop(scale)
-          .tickFormat(
-            this.axis.options.tickFormat ?? this.axis.defaultFormatter()
-          )
-      : d3
-          .axisBottom(scale)
-          .tickFormat(
-            this.axis.options.tickFormat ?? this.axis.defaultFormatter()
-          );
-
-    d3.select(this.node.nativeElement)
-      .call(axis)
-      .call((_) => _.select('.domain').remove());
-  }
-}

package/src/chart/chart-container/y-axis/y-axis.component.html

@@ -1,4 +0,0 @@
-<svg:g #svg></svg:g>
-<svg:g class="label-axis font-caption" [attr.transform]="getLabelTransform()">
-  <text dy="-8px" text-anchor="middle" dominant-baseline="middle">{{ axis.options.title }}</text>
-</svg:g>

package/src/chart/chart-container/y-axis/y-axis.component.scss

@@ -1,13 +0,0 @@
-:host {
-  shape-rendering: crispEdges;
-}
-
-::ng-deep .tick text {
-  fill: var(--color-text-70);
-}
-::ng-deep .tick line {
-  stroke: var(--color-text-20);
-}
-:host .label-axis {
-  fill: var(--color-text-70);
-}

package/src/chart/chart-container/y-axis/y-axis.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { YAxisComponent } from './y-axis.component';
-
-describe('YAxisComponent', () => {
-  let component: YAxisComponent;
-  let fixture: ComponentFixture<YAxisComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ YAxisComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(YAxisComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/chart/chart-container/y-axis/y-axis.component.ts

@@ -1,90 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import { Axis } from '../../core/axis/axis';
-import * as d3 from 'd3';
-import { ScaleService } from '../../service/scale.service';
-import { ChartService } from '../../service/chart.service';
-import { ZoomService } from '../../service/zoom.service';
-import { merge, takeWhile, tap } from 'rxjs';
-
-@Component({
-  selector: '[teta-y-axis]',
-  templateUrl: './y-axis.component.html',
-  styleUrls: ['./y-axis.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class YAxisComponent implements OnInit, OnDestroy, AfterViewInit {
-  @Input() axis: Axis;
-  @Input() size: DOMRect;
-  @ViewChild('svg') node: ElementRef;
-
-  private _alive = true;
-
-  constructor(
-    private scaleService: ScaleService,
-    private chartService: ChartService,
-    private cdr: ChangeDetectorRef,
-    private zoomService: ZoomService
-  ) {
-    merge(this.zoomService.zoomed, this.chartService.size)
-      .pipe(
-        takeWhile(() => this._alive),
-        tap((_) => {
-          this.draw();
-          this.cdr.markForCheck();
-        })
-      )
-      .subscribe();
-  }
-
-  ngOnInit(): void {}
-
-  ngOnDestroy(): void {
-    this._alive = false;
-  }
-
-  ngAfterViewInit() {
-    this.draw();
-  }
-
-  getLabelTransform() {
-    return `translate(${
-      this.axis.options.opposite
-        ? this.axis.selfSize - 24
-        : -this.axis.selfSize + 24
-    }, ${this.size.height / 2}) rotate(${
-      this.axis.options.opposite ? '90' : '-90'
-    })`;
-  }
-
-  private draw() {
-    const scale = this.scaleService.yScales.get(this.axis.index);
-
-    const axis = this.axis.options.opposite
-      ? d3
-          .axisRight(scale)
-          // .tickValues(this.axis.tickValues)
-          .tickFormat(
-            this.axis.options.tickFormat ?? this.axis.defaultFormatter()
-          )
-      : d3
-          .axisLeft(scale)
-          // .tickValues(this.axis.tickValues)
-          .tickFormat(
-            this.axis.options.tickFormat ?? this.axis.defaultFormatter()
-          );
-
-    d3.select(this.node.nativeElement)
-      .call(axis)
-      .call((_) => _.select('.domain').remove());
-  }
-}

package/src/chart/chart.module.ts

@@ -1,40 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ChartComponent } from './chart/chart.component';
-import { SeriesHostComponent } from './chart-container/series-host/series-host.component';
-import { ChartContainerComponent } from './chart-container/chart-container.component';
-import { LegendComponent } from './legend/legend.component';
-import { SeriesBaseComponent } from './base/series-base.component';
-import { LineSeriesComponent } from './chart-container/series/line/line-series.component';
-import { GridlinesComponent } from './chart-container/gridlines/gridlines.component';
-import { XAxisComponent } from './chart-container/x-axis/x-axis.component';
-import { YAxisComponent } from './chart-container/y-axis/y-axis.component';
-import { PlotlineComponent } from './chart-container/plotline/plotline.component';
-import { PlotbandComponent } from './chart-container/plotband/plotband.component';
-import { BarSeriesComponent } from './chart-container/series/bar/bar-series.component';
-import { TooltipComponent } from './chart-container/tooltip/tooltip.component';
-import { ZoomableDirective } from './directives/zoomable.directive';
-import { BrushableDirective } from './directives/brushable.directive';
-
-@NgModule({
-  declarations: [
-    ChartComponent,
-    SeriesHostComponent,
-    ChartContainerComponent,
-    LegendComponent,
-    SeriesBaseComponent,
-    LineSeriesComponent,
-    GridlinesComponent,
-    XAxisComponent,
-    YAxisComponent,
-    PlotlineComponent,
-    PlotbandComponent,
-    BarSeriesComponent,
-    TooltipComponent,
-    ZoomableDirective,
-    BrushableDirective,
-  ],
-  exports: [ChartComponent],
-  imports: [CommonModule],
-})
-export class ChartModule {}

package/src/chart/core/axis/axis.ts

@@ -1,132 +0,0 @@
-import { IChartConfig } from '../../model/i-chart-config';
-import { AxisOrientation } from '../../model/enum/axis-orientation';
-import { Series } from '../../model/series';
-import { BasePoint } from '../../model/base-point';
-import * as d3 from 'd3';
-import { AxisOptions } from '../../model/axis-options';
-import { AxisSizeBuilder, ExtremesBuilder } from './builders/public-api';
-import { AxisType } from '../../model/enum/axis-type';
-
-import { generateTicks } from '../utils/public-api';
-
-export class Axis {
-  private chartConfig: IChartConfig;
-  private _orientation: AxisOrientation;
-  private _index: number | string;
-  private _extremes: [number, number] = [0, 0];
-  private _selfSize: number;
-  private _ticksValues: number[];
-
-  private defaultFormatters = new Map<AxisType, any>()
-    .set(AxisType.number, d3.format(',.2f'))
-    .set(AxisType.time, d3.timeFormat('%B %d, %Y'))
-    .set(AxisType.log, d3.format(',.2f'));
-
-  constructor(config: IChartConfig) {
-    this.chartConfig = config;
-  }
-
-  /**
-   * Factory for creating x,y axes
-   * @param {AxisOrientation} orientation
-   * Axis type
-   * @param {IChartConfig} config
-   * Chart config
-   * @param {number} index
-   * Index axis
-   * @return {Axis}
-   * New generated axis
-   */
-  public static createAxis(
-    orientation: AxisOrientation,
-    config: IChartConfig,
-    index: number
-  ): Axis {
-    const axis = new Axis(config);
-    axis.setLocate(orientation);
-    axis.setIndex(index);
-    axis.setExtremes();
-    axis.setTicksValues();
-    axis.setSelfSize();
-
-    return axis;
-  }
-
-  /**
-   *
-   * @param {orientation} orientation
-   * Set locate axis x or y
-   */
-  private setLocate(orientation: AxisOrientation): void {
-    this._orientation = orientation;
-  }
-
-  /**
-   *
-   * @param {number | string} index
-   * Index axis
-   */
-  private setIndex(index: number | string): void {
-    this._index = index;
-  }
-
-  /**
-   * @return {Array<Series<BasePoint>>}
-   * Linked series
-   */
-  public linkedSeries(): Array<Series<BasePoint>> {
-    const linkedFilter = (serie: Series<BasePoint>) =>
-      serie[
-        this._orientation === AxisOrientation.y ? 'yAxisIndex' : 'xAxisIndex'
-      ] === this._index;
-
-    return this.chartConfig?.series.filter(linkedFilter);
-  }
-
-  private setExtremes(): void {
-    const builder = new ExtremesBuilder();
-    this._extremes = builder.build(this);
-
-    this._extremes = d3.nice(this._extremes[0], this._extremes[1], 10);
-  }
-
-  private setSelfSize(): void {
-    const builder = new AxisSizeBuilder();
-    this._selfSize = builder.build(this);
-  }
-
-  private setTicksValues(): void {
-    const ticks = generateTicks(this._extremes);
-    this._ticksValues = ticks;
-  }
-
-  get extremes(): Array<number> {
-    return this._extremes;
-  }
-
-  get orientation(): AxisOrientation {
-    return this._orientation;
-  }
-
-  get selfSize(): number {
-    return this._selfSize;
-  }
-
-  get tickValues(): number[] {
-    return this._ticksValues;
-  }
-
-  get index() {
-    return this._index;
-  }
-
-  get options(): AxisOptions {
-    return this.orientation === AxisOrientation.x
-      ? this.chartConfig.xAxis[this.index]
-      : this.chartConfig.yAxis[this.index];
-  }
-
-  public defaultFormatter() {
-    return this.defaultFormatters.get(this.options.type);
-  }
-}

package/src/chart/core/axis/builders/axis-size-builder.ts

@@ -1,37 +0,0 @@
-import { Axis } from '../axis';
-import { AxisOrientation } from '../../../model/enum/axis-orientation';
-import { maxIndex } from 'd3-array';
-import { getTextWidth } from '../../utils/public-api';
-import { IBuilder } from '../../../model/i-builder';
-
-export class AxisSizeBuilder implements IBuilder<Axis, number> {
-  private titlePadding = 8;
-  private basePadding = 16;
-  private backupRatio = 0.58;
-
-  build(settings: Axis): number {
-    let finalPadding = this.basePadding;
-
-    if (settings.orientation === AxisOrientation.y) {
-      const formatter = settings.defaultFormatter();
-
-      finalPadding += settings.options.title ? this.titlePadding : 0;
-
-      const maxElementLengthIndex = maxIndex(
-        settings.tickValues,
-        (_) => formatter(_).length
-      );
-
-      finalPadding += getTextWidth(
-        formatter(settings.tickValues[maxElementLengthIndex]),
-        this.backupRatio
-      );
-    }
-
-    if (settings.orientation === AxisOrientation.x) {
-      finalPadding += finalPadding + 20;
-    }
-
-    return finalPadding;
-  }
-}

package/src/chart/core/axis/builders/extremes-builder.ts

@@ -1,45 +0,0 @@
-import { IBuilder } from '../../../model/i-builder';
-import { Axis } from '../axis';
-import { BasePoint } from '../../../model/base-point';
-import { AxisOrientation } from '../../../model/enum/axis-orientation';
-
-import * as d3 from 'd3';
-
-export class ExtremesBuilder implements IBuilder<Axis, [number, number]> {
-  private extentAccessorMap = new Map<
-    AxisOrientation,
-    (point: BasePoint) => number
-  >()
-    .set(AxisOrientation.x, (_) => _.x)
-    .set(AxisOrientation.y, (_) => _.y);
-
-  private extremes: [number, number] = [0, 0];
-
-  build(settings: Axis): [number, number] {
-    const options = settings.options;
-
-    const hasMin = options?.min != null;
-    const hasMax = options?.max != null;
-
-    if (!hasMin || !hasMax) {
-      const linkedSeries = settings.linkedSeries();
-      const data = linkedSeries.reduce((acc: BasePoint[], current) => {
-        return acc.concat(current.data);
-      }, []);
-
-      const accessor = this.extentAccessorMap.get(settings.orientation);
-      // add negative axis!
-
-      this.extremes = d3.extent(data, accessor);
-    }
-
-    if (hasMin) {
-      this.extremes[0] = options?.min;
-    }
-
-    if (hasMax) {
-      this.extremes[1] = options?.max;
-    }
-    return this.extremes;
-  }
-}

package/src/chart/core/axis/builders/public-api.ts

@@ -1,2 +0,0 @@
-export * from './axis-size-builder';
-export * from './extremes-builder';

package/src/chart/core/utils/generate-ticks.ts

@@ -1,14 +0,0 @@
-import * as d3 from 'd3';
-
-export function generateTicks(extremes: number[]) {
-  const [min, max] = extremes;
-
-  const tickCount = 10;
-  const tickStep = (max - min) / tickCount;
-
-  const ticks = d3
-    .range(min, max + tickStep, tickStep)
-    .filter((step) => step <= max);
-
-  return ticks;
-}

package/src/chart/core/utils/get-text-width.ts

@@ -1,10 +0,0 @@
-export const getTextWidth = (
-  inputText?: string | number | null,
-  backupRatio = 0.5,
-  fontSize = 11
-): number => {
-  let text = inputText ?? '';
-  text = text.toString();
-
-  return fontSize * backupRatio * text.length;
-};

package/src/chart/core/utils/public-api.ts

@@ -1,2 +0,0 @@
-export * from './get-text-width';
-export * from './generate-ticks';

package/src/chart/default/default-chart-config.ts

@@ -1,12 +0,0 @@
-import {IChartConfig} from '../model/i-chart-config';
-
-export const defaultChartConfig: IChartConfig = {
-  series: [],
-  xAxis: [{
-    visible: true
-  }],
-  yAxis: [{
-    visible: true
-  }],
-  gridLines: true
-};