@tetacom/svg-charts 1.0.1

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

@@ -0,0 +1,134 @@
+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

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

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

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,13 @@
+: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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,45 @@
+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

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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,10 @@
+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

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

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

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