@tetacom/ng-components 1.0.25 → 1.0.28

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

@@ -1,2 +0,0 @@
-export * from './axis-creator';
-export * from './chart';

package/src/component/chart/drawer/area-drawer.ts

@@ -1,30 +0,0 @@
-import { IDrawer } from '../model/i-drawer';
-import { BasePoint } from '../model/point/base-point';
-import { Series } from '../model/series';
-import * as d3 from 'd3';
-
-export class AreaDrawer implements IDrawer<BasePoint> {
-  draw(
-    series: Series<BasePoint>,
-    context: d3.Selection<SVGElement, unknown, null, undefined>,
-    scaleX: any,
-    scaleY: any
-  ): void {
-    const points = series.data;
-
-    const path = d3
-      .area()
-      .x1((d: any) => (d.x1 != null ? scaleX(d.x1) : scaleX(0)))
-      .x0((d: any) => scaleX(d.x))
-      .y((d: any) => scaleY(d.y));
-
-    context
-      .append('path')
-      .attr('transform', `translate(${0}, 0)`)
-      .attr('fill', series.color)
-      .attr('stroke', series.color)
-      .attr('stroke-width', series.strokeWidth ? series.strokeWidth : 1)
-      .datum(points)
-      .attr('d', path as any);
-  }
-}

package/src/component/chart/drawer/bar-drawer.ts

@@ -1,36 +0,0 @@
-import { IDrawer } from '../model/i-drawer';
-import { BasePoint } from '../model/point/base-point';
-import { Series } from '../model/series';
-import * as d3 from 'd3';
-import { BarPoint } from '../model/point/bar-point';
-
-export class BarDrawer implements IDrawer<BasePoint> {
-  draw(
-    series: Series<BarPoint>,
-    context: d3.Selection<SVGElement, unknown, null, undefined>,
-    scaleX: any,
-    scaleY: any
-  ): void {
-    const points = series.data.filter((_) => _.visible);
-
-    const barScale = d3
-      .scaleBand<number>()
-      .domain(d3.range(points.length))
-      .range(scaleX.range())
-      .paddingInner(0.2)
-      .paddingOuter(0.2);
-
-    const u = context.selectAll('rect').data(points) as any;
-
-    u.enter()
-      .append('rect')
-      .merge(u as any)
-      .attr('x', (d: BasePoint, i) => barScale(i))
-      .attr('y', (d: BasePoint) => scaleY(d.y))
-      .attr('width', barScale.bandwidth())
-      .attr('height', (d: BasePoint) => Math.abs(scaleY(0) - scaleY(d.y)))
-      .attr('fill', (d: BasePoint) => d.color);
-
-    u.exit().remove();
-  }
-}

package/src/component/chart/drawer/contour-drawer.ts

@@ -1,47 +0,0 @@
-import { IDrawer } from '../model/i-drawer';
-import { Series } from '../model/series';
-import * as d3 from 'd3';
-import { tricontour } from 'd3-tricontour';
-import { ContourPoint } from '../model/point/contour-point';
-
-export class ContourDrawer implements IDrawer<ContourPoint> {
-  draw(
-    series: Series<ContourPoint>,
-    context: d3.Selection<SVGElement, unknown, null, undefined>,
-    scaleX: any,
-    scaleY: any
-  ): void {
-    const points = series.data;
-
-    const tricontourFn = tricontour()
-      .x((d) => scaleX(d.x))
-      .y((d) => scaleY(d.y))
-      .value((d) => d.value)
-      .thresholds(30);
-
-    let contours = tricontourFn(points);
-
-    const geoFn = d3.geoPath();
-
-    const color = series?.colorScale.domain(
-      d3.extent(contours, (d: ContourPoint) => d.value) as any
-    );
-
-    contours = contours.map((_) => ({
-      ..._,
-      color: color(_.value),
-    }));
-
-    const u = context.selectAll('path').data(contours) as any;
-
-    u.enter()
-      .append('path')
-      .merge(u as any)
-      .attr('d', (_: any) => geoFn(_))
-      .attr('stroke', 'rgba(255, 255,255,0.5)')
-      .attr('stroke-width', 0.5)
-      .attr('fill', (_: ContourPoint) => _.color);
-
-    u.exit().remove();
-  }
-}

package/src/component/chart/drawer/default-drawer-mapping.ts

@@ -1,19 +0,0 @@
-import { SeriesType } from '../model/enum/series-type';
-import { IDrawer } from '../model/i-drawer';
-import { BasePoint } from '../model/point/base-point';
-import { AreaDrawer } from './area-drawer';
-import { BarDrawer } from './bar-drawer';
-import { LineDrawer } from './line-drawer';
-import { PieDrawer } from './pie-drawer';
-import { SplineDrawer } from './spline-drawer';
-import { ScatterDrawer } from './scatter-drawer';
-import { ContourDrawer } from './contour-drawer';
-
-export const defaultDrawerMapping = new Map<SeriesType, IDrawer<BasePoint>>()
-  .set(SeriesType.area, new AreaDrawer())
-  .set(SeriesType.bar, new BarDrawer())
-  .set(SeriesType.line, new LineDrawer())
-  .set(SeriesType.pie, new PieDrawer())
-  .set(SeriesType.scatter, new ScatterDrawer())
-  .set(SeriesType.spline, new SplineDrawer())
-  .set(SeriesType.contour, new ContourDrawer());

package/src/component/chart/drawer/line-drawer.ts

@@ -1,203 +0,0 @@
-import { IDrawer } from '../model/i-drawer';
-import { BasePoint } from '../model/point/base-point';
-import { Series } from '../model/series';
-import * as d3 from 'd3';
-import { ChartOptions } from '../model/chart-options';
-import { IDragEvent } from '../model/i-drag-event';
-import { DispatchType } from '../model/enum/dispatch-type';
-import { DragPointType } from '../model/enum/drag-point-type';
-
-export class LineDrawer implements IDrawer<BasePoint> {
-  dispatch: d3.Dispatch<IDragEvent<Series<BasePoint>>>;
-
-  constructor() {
-    this.dispatch = d3.dispatch(DispatchType.moveLine, DispatchType.movePoint);
-  }
-
-  draw(
-    series: Series<BasePoint>,
-    context: d3.Selection<SVGElement, unknown, null, undefined>,
-    scaleX: any,
-    scaleY: any,
-    options: ChartOptions
-  ): void {
-    const points = series.data;
-
-    const markerPoints = points.filter((_) => _.marker);
-
-    const path = d3
-      .line<BasePoint>()
-      .curve(series.curveType)
-      .defined((d) => d.x != null && d.y != null)
-      .x((d) => scaleX(d.x))
-      .y((d) => scaleY(d.y));
-
-    const seriesIndex = options.series.findIndex((_) => _.id === series.id);
-
-    context
-      .append('path')
-      .attr('class', (d: BasePoint) =>
-        series?.drag.enable ? 'draggable' : `series-${seriesIndex}`
-      )
-      .attr('data-draggable-id', seriesIndex)
-      .attr('fill', 'none')
-      .attr('stroke', series.color)
-      .attr('stroke-dasharray', series?.strokeDasharray)
-      .attr('stroke-width', series.strokeWidth ? series.strokeWidth : 1)
-      .style('cursor', series?.drag?.enable ? 'move' : 'default')
-      .datum(points)
-      .attr('d', path);
-
-    const u = context.append('g').attr('class', 'grabbers');
-
-    const emit = (event: DragEvent, target: Series<BasePoint>) => {
-      this.dispatch.apply(DispatchType.moveLine, {
-        target,
-        event,
-      });
-    };
-
-    if (series.drag.enable) {
-      u.selectAll('circle')
-        .data(points)
-        .enter()
-        .append('circle')
-        .attr('data-grabber-id', seriesIndex)
-        .attr('stroke', series?.drag?.grabbers?.stroke ?? series?.color)
-        .attr('stroke-width', series?.drag?.grabbers?.strokeWidth ?? 1)
-        .attr('fill', series?.drag?.grabbers?.fill ?? series?.color)
-        .attr('r', series?.drag?.grabbers?.radius ?? 4)
-        .attr('cx', function (d) {
-          return scaleX(d.x);
-        })
-        .attr('cy', function (d) {
-          return scaleY(d.y);
-        })
-        .style('cursor', 'move')
-        .call(
-          d3.drag().on('start drag end', function (event, d: BasePoint) {
-            d.x = scaleX.invert(event.sourceEvent?.offsetX);
-            d.y = scaleY.invert(event.sourceEvent?.offsetY);
-            d3.select(this).attr('cx', scaleX(d.x)).attr('cy', scaleY(d.y));
-
-            context
-              .select(`[data-draggable-id='${seriesIndex}']`)
-              .attr('d', path);
-
-            emit(event, series);
-
-            if (series?.drag?.extendLine) {
-              drawExtendedLine();
-            }
-          })
-        );
-
-      u.exit().remove();
-    }
-
-    const drawExtendedLine = () => {
-      context.selectAll(`[data-extended-id='${seriesIndex}']`).remove();
-
-      const p1 = points[0];
-      const p2 = points[points.length - 1];
-
-      const distance = Math.sqrt(
-        Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p2.y, 2)
-      );
-
-      if (distance <= 0) {
-        return;
-      }
-
-      const extendLength = 50;
-
-      const extendedEndX = p2.x + ((p2.x - p1.x) / distance) * extendLength;
-      const extendedEndY = p2.y + ((p2.y - p1.y) / distance) * extendLength;
-
-      const extendedStartX = p1.x - ((p2.x - p1.x) / distance) * extendLength;
-      const extendedStartY = p1.y - ((p2.y - p1.y) / distance) * extendLength;
-
-      context
-        .append('line')
-        .attr('class', 'extendedLine')
-        .attr('data-extended-id', seriesIndex)
-        .attr('stroke', series?.color)
-        .attr('stroke-width', series?.strokeWidth)
-        .attr('stroke-dasharray', series?.strokeDasharray)
-        .attr('x1', scaleX(p1.x))
-        .attr('y1', scaleY(p1.y))
-        .attr('x2', scaleX(extendedStartX))
-        .attr('y2', scaleY(extendedStartY));
-
-      context
-        .append('line')
-        .attr('class', 'extendedLine')
-        .attr('data-extended-id', seriesIndex)
-        .attr('stroke', series?.color)
-        .attr('stroke-width', series?.strokeWidth)
-        .attr('stroke-dasharray', series?.strokeDasharray)
-        .attr('x1', scaleX(p2.x))
-        .attr('y1', scaleY(p2.y))
-        .attr('x2', scaleX(extendedEndX))
-        .attr('y2', scaleY(extendedEndY));
-    };
-
-    if (series?.drag?.extendLine && points?.length) {
-      drawExtendedLine();
-    }
-
-    if (markerPoints?.length) {
-      const emit = (event: DragEvent, target: BasePoint) => {
-        this.dispatch.apply(DispatchType.movePoint, {
-          target: series,
-          point: {
-            ...target,
-          },
-          event,
-        });
-      };
-
-      context
-        .selectAll(`draggable-marker-${seriesIndex}`)
-        .data(markerPoints)
-        .enter()
-        .append('circle')
-        .attr('class', `draggable-marker-${seriesIndex}`)
-        .attr('r', (d) => d.marker?.style?.radius || 5)
-        .attr('cx', function (d) {
-          return scaleX(d.x);
-        })
-        .attr('cy', function (d) {
-          return scaleY(d.y);
-        })
-        .style('cursor', 'pointer')
-        .style('fill', (d) => d.marker?.style?.color || 'none')
-        .attr('stroke', (d) => d.marker?.style?.stroke || 'none')
-        .attr('stroke-width', (d) => d.marker?.style?.strokeWidth || 0);
-
-      context.selectAll(`.draggable-marker-${seriesIndex}`).call(
-        d3.drag().on('drag start end', function dragged(event, d: BasePoint) {
-          const node = d3.select(this);
-
-          if (event.type === 'start') {
-            node.raise().classed('active', true);
-          }
-
-          if (d.marker?.dragType === DragPointType.x) {
-            d.x = scaleX.invert(event.sourceEvent?.offsetX);
-            node.attr('cx', scaleX(d.x));
-          }
-
-          if (d.marker?.dragType === DragPointType.y) {
-            d.y = scaleY.invert(event.sourceEvent?.offsetY);
-            node.attr('cy', scaleY(d.y));
-          }
-
-          context.select(`.series-${seriesIndex}`).attr('d', path);
-
-          emit(event, d);
-        })
-      );
-    }
-  }
-}

package/src/component/chart/drawer/pie-drawer.ts

@@ -1,13 +0,0 @@
-import { IDrawer } from '../model/i-drawer';
-import { BasePoint } from '../model/point/base-point';
-import { Series } from '../model/series';
-import * as d3 from 'd3';
-
-export class PieDrawer implements IDrawer<BasePoint> {
-  draw(
-    series: Series<BasePoint>,
-    context: d3.Selection<SVGElement, unknown, null, undefined>,
-    scaleX: any,
-    scaleY: any
-  ): void {}
-}

package/src/component/chart/drawer/public-api.ts

@@ -1,6 +0,0 @@
-export * from './area-drawer';
-export * from './bar-drawer';
-export * from './line-drawer';
-export * from './pie-drawer';
-export * from './scatter-drawer';
-export * from './spline-drawer';

package/src/component/chart/drawer/scatter-drawer.ts

@@ -1,138 +0,0 @@
-import { IDrawer } from '../model/i-drawer';
-import { Series } from '../model/series';
-import * as d3 from 'd3';
-import { ScatterPoint } from '../model/point/scatter-point';
-import { ChartOptions } from '../model/chart-options';
-
-export class ScatterDrawer implements IDrawer<ScatterPoint> {
-  private _virtualCanvas: any;
-  private _colorToData = {};
-  private _options: ChartOptions;
-  private _context:
-    | d3.Selection<SVGElement, unknown, null, undefined>
-    | d3.Selection<HTMLCanvasElement, unknown, null, undefined>;
-
-  draw(
-    series: Series<ScatterPoint>,
-    context:
-      | d3.Selection<SVGElement, unknown, null, undefined>
-      | d3.Selection<HTMLCanvasElement, unknown, null, undefined>,
-    scaleX: any,
-    scaleY: any,
-    options: ChartOptions
-  ): void {
-    this._options = options;
-
-    d3.select(context.node().parentNode as any).select('.virtual-canvas').remove();
-
-    if (series.renderTo === 'canvas') {
-      this._context = context;
-
-      const height = context.node().clientHeight;
-      const width = context.node().clientWidth;
-
-      const points = series.data;
-
-      const context2D = (context.node() as HTMLCanvasElement).getContext('2d');
-      this._virtualCanvas = d3
-        .select(context.node().parentNode as any)
-        .append('canvas')
-        .attr('class', 'virtual-canvas')
-        .style('display', 'none');
-
-      this._virtualCanvas.attr('width', width).attr('height', height);
-      const virtualContext = this._virtualCanvas.node().getContext('2d');
-
-      context.on('mouseout', () => {
-        d3.select(this._context.node().parentNode as any)
-          .select('.tooltip-chart')
-          .style('display', 'none');
-
-        context.on('mousemove', null);
-      });
-
-      context.on('mouseenter', () => {
-        d3.select(this._context.node().parentNode as any)
-          .select('.tooltip-chart')
-          .style('display', null);
-        context.on('mousemove', (e) => this.handleMouseMove(e));
-      });
-
-      points.forEach((d: any, idx) => {
-        const color = this.getColor(idx);
-        this._colorToData[color] = d;
-        virtualContext.fillStyle = color;
-        context2D.fillStyle = d.color;
-
-        const cx = scaleX(d.x);
-        const cy = scaleY(d.y);
-
-        context2D.beginPath();
-        context2D.arc(cx, cy, d.radius, 0, 2 * Math.PI);
-        context2D.closePath();
-        context2D.fill();
-
-        virtualContext.beginPath();
-        virtualContext.arc(cx, cy, d.radius, 0, 2 * Math.PI);
-        virtualContext.closePath();
-        virtualContext.fill();
-      });
-    }
-  }
-
-  private getColor(index) {
-    return d3
-      .rgb(
-        Math.floor(index / 256 / 256) % 256,
-        Math.floor(index / 256) % 256,
-        index % 256
-      )
-      .toString();
-  }
-
-  private tooltipPosition(event) {
-    const centerX = this._context.node().clientWidth / 2;
-    const centerY = this._context.node().clientHeight / 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;
-  }
-
-  private handleMouseMove(event: MouseEvent) {
-    const mouse = d3.pointer(event);
-
-    const virtualContext = this._virtualCanvas.node().getContext('2d');
-
-    const image = virtualContext.getImageData(mouse[0], mouse[1], 1, 1);
-    const color = d3.rgb.apply(null, image.data).toString();
-    const possibleDatum = this._colorToData[color];
-
-    const { top, right, bottom, left } = this.tooltipPosition(event);
-
-    if (possibleDatum) {
-      const formatted = this._options.tooltip?.format([possibleDatum]);
-      d3.select(this._context.node().parentNode as any)
-        .select('.tooltip-chart')
-        .style('z-index', 3)
-        .style('top', top)
-        .style('right', right)
-        .style('bottom', bottom)
-        .style('left', left)
-        .html(formatted);
-    }
-  }
-}

package/src/component/chart/drawer/spline-drawer.ts

@@ -1,33 +0,0 @@
-import { IDrawer } from '../model/i-drawer';
-import { BasePoint } from '../model/point/base-point';
-import { Series } from '../model/series';
-import * as d3 from 'd3';
-
-export class SplineDrawer implements IDrawer<BasePoint> {
-  draw(
-    series: Series<BasePoint>,
-    context: d3.Selection<SVGElement, unknown, null, undefined>,
-    scaleX: any,
-    scaleY: any
-  ): void {
-    const points = series.data;
-
-    const path = d3
-      .line()
-      .curve(d3.curveCatmullRom)
-      .defined((d: any) => d.x != null && d.y != null)
-      .x((d: any) => scaleX(d.x))
-      .y((d: any) => scaleY(d.y));
-
-    context
-      .append('path')
-      .attr('transform', `translate(${0}, 0)`)
-      .attr('fill', 'none')
-      .attr('stroke', series.color)
-      .attr('stroke-width', series.strokeWidth ? series.strokeWidth : 1)
-      .datum(points)
-      .attr('d', path as any)
-      .transition()
-      .duration(750);
-  }
-}

package/src/component/chart/legend-drawer/default-drawer-legend-mapping.ts

@@ -1,8 +0,0 @@
-import { ILegendDrawer } from '../model/i-drawer-legend';
-import { LegendType } from '../model/enum/legend-type';
-import { SwatchDrawer } from './swatch-drawer';
-import { GradientDrawer } from './gradient-drawer';
-
-export const defaultLegendDrawerMapping = new Map<LegendType, ILegendDrawer>()
-  .set(LegendType.swatches, new SwatchDrawer())
-  .set(LegendType.gradient, new GradientDrawer());

package/src/component/chart/legend-drawer/gradient-drawer.ts

@@ -1,65 +0,0 @@
-import * as d3 from 'd3';
-import { ILegendDrawer, LegendDrawOptions } from '../model/i-drawer-legend';
-import { BasePoint } from '../model/point/base-point';
-
-export class GradientDrawer implements ILegendDrawer {
-  draw(options: LegendDrawOptions<BasePoint>): void {
-    const container = d3
-      .select(options.context.parentElement)
-      .select('.legend-container');
-
-    container.selectAll('.gradient-legend').remove();
-
-    const svg = container
-      .append('svg')
-      .attr('class', 'gradient-legend')
-      .attr('width', options.width)
-      .attr('height', 32);
-
-    svg.selectAll('.legend-defs').remove();
-
-    const extent = d3.extent(
-      options.series[0]?.data as any,
-      (d: any) => d.value
-    ) as any;
-
-    const defs = svg.append('defs').attr('class', 'legend-defs') as any;
-
-    const linearGradient = defs
-      .append('linearGradient')
-      .attr('id', 'legend-gradient');
-
-    linearGradient
-      .selectAll('stop')
-      .data([...options.series[0]?.data].reverse())
-      .enter()
-      .append('stop')
-      .attr(
-        'offset',
-        (d) => ((d.value - extent[0]) / (extent[1] - extent[0])) * 100 + '%'
-      )
-      .attr('stop-color', (d) => d.color);
-
-    const g = svg.append('g').attr('class', 'gradient-legend');
-
-    g.append('rect')
-      .attr('width', options.width - 80)
-      .attr('transform', 'translate(40, 0)')
-      .attr('height', 4)
-      .style('fill', 'url(#legend-gradient)');
-
-    const xScale = d3
-      .scaleLinear()
-      .range([80, options.width - 80])
-      .domain(extent)
-      .nice();
-    const tickCount = options.width / 80;
-
-    const xAxis = d3.axisBottom(xScale).tickSize(8).ticks(tickCount);
-
-    g.call(xAxis).call((node) => {
-      node.select('.domain').remove();
-      node.selectAll('line').remove();
-    });
-  }
-}