@tetacom/ng-components 1.0.25 → 1.0.28

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

@@ -1,81 +0,0 @@
-import * as d3 from 'd3';
-import { SeriesType } from '../model/enum/series-type';
-import { ILegendDrawer, LegendDrawOptions } from '../model/i-drawer-legend';
-import { BasePoint } from '../model/point/base-point';
-import { BarPoint } from '../model/point/bar-point';
-
-const classTypeLegendMapping = new Map<SeriesType, string>()
-  .set(SeriesType.line, 'line')
-  .set(SeriesType.spline, 'line');
-
-export class SwatchDrawer implements ILegendDrawer {
-  draw(options: LegendDrawOptions<BasePoint | BarPoint>): void {
-    d3.select(options.context.parentElement)
-      .select('.legend-container')
-      .selectAll('.legend')
-      .remove();
-
-    const defaultData = options.series?.filter(
-      (serie) => serie.type !== SeriesType.bar
-    );
-    const barData = options?.series
-      ?.filter((serie) => serie.type === SeriesType.bar)
-      .reduce((acc, serie) => {
-        const data = serie.data.map((_) => ({
-          ..._,
-          serieType: serie.type,
-          serieIndex: serie.id,
-        }));
-
-        return acc.concat(data);
-      }, []);
-
-    const legendContainer = d3
-      .select(options.context.parentElement)
-      .select('.legend-container')
-      .append('div')
-      .attr('class', 'legend padding-bottom-4');
-
-    const defaultLegend = legendContainer
-      .selectAll('div')
-      .data(defaultData)
-      .enter()
-      .append('div')
-      .attr('class', 'item')
-      .style('user-select', 'none');
-
-    const barLegend = legendContainer
-      .selectAll('.bar')
-      .data(barData)
-      .enter()
-      .append('div')
-      .attr('class', 'item bar')
-      .style('user-select', 'none');
-
-    defaultLegend
-      .append('div')
-      .attr('class', (_) => classTypeLegendMapping.get(_.type) || 'swatch')
-      .style('background', (_) =>
-        _.visible ? _.color ?? 'black' : 'var(--color-text-10)'
-      );
-
-    defaultLegend
-      .append('div')
-      .attr('class', 'label')
-      .text((_) => _.name ?? 'Без названия')
-      .style('text-decoration', (_) => (_.visible ? 'unset' : 'line-through'));
-
-    barLegend
-      .append('div')
-      .attr('class', 'swatch')
-      .style('background', (_) =>
-        _.visible ? _.color ?? 'black' : 'var(--color-text-10)'
-      );
-
-    barLegend
-      .append('div')
-      .attr('class', 'label')
-      .text((_) => _.label ?? 'Без названия')
-      .style('text-decoration', (_) => (_.visible ? 'unset' : 'line-through'));
-  }
-}

package/src/component/chart/model/annotation.ts

@@ -1,96 +0,0 @@
-import {
-  annotationBadge,
-  annotationCallout,
-  annotationCalloutCircle,
-  annotationCalloutCurve,
-  annotationCalloutElbow,
-  annotationCalloutRect,
-  annotationCustomType,
-  annotationLabel,
-  annotationXYThreshold,
-} from 'd3-svg-annotation';
-import { BasePoint } from './point/base-point';
-
-const annotationMap = [
-  annotationBadge,
-  annotationLabel,
-  annotationCallout,
-  annotationCalloutCircle,
-  annotationCalloutCurve,
-  annotationCalloutElbow,
-  annotationCalloutRect,
-  annotationCustomType,
-  annotationXYThreshold,
-] as const;
-
-type AnnotationTypes = typeof annotationMap[number];
-
-export class Annotation {
-  point: BasePoint;
-  yAxisIndex: number;
-  xAxisIndex: number;
-  type?: AnnotationTypes;
-  enabled?: boolean;
-  fillColor?: string;
-  borderWidth?: number;
-  borderColor?: string;
-  dx?: number;
-  dy?: number;
-  className?: string;
-  connector?: {
-    end: string;
-  };
-  note?: {
-    label?: string;
-    title?: string;
-    bgPadding?: {
-      top?: number;
-      right?: number;
-      bottom?: number;
-      left?: number;
-    };
-    bgRadius?: boolean;
-  };
-
-  constructor(options?: {
-    point: BasePoint;
-    type?: AnnotationTypes;
-    yAxisIndex: number;
-    xAxisIndex: number;
-    enabled?: boolean;
-    fillColor?: string;
-    borderWidth?: number;
-    borderColor?: string;
-    dx?: number;
-    dy?: number;
-    className?: string;
-    connector?: {
-      end: string;
-    };
-    note?: {
-      label?: string;
-      title?: string;
-      bgPadding?: {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-      };
-      bgRadius?: boolean;
-    };
-  }) {
-    this.point = options?.point;
-    this.yAxisIndex = options?.yAxisIndex;
-    this.xAxisIndex = options?.xAxisIndex;
-    this.type = options?.type || annotationLabel;
-    this.enabled = options?.enabled;
-    this.className = options?.className;
-    this.fillColor = options?.fillColor;
-    this.borderColor = options?.borderColor;
-    this.borderWidth = options?.borderWidth;
-    this.note = options?.note;
-    this.connector = options?.connector;
-    this.dx = options?.dx;
-    this.dy = options?.dy;
-  }
-}

package/src/component/chart/model/axis-options.ts

@@ -1,65 +0,0 @@
-import { PlotLine } from './plot-line';
-import { PlotBand } from './plot-band';
-import { ScaleType } from './enum/scale-type';
-
-export class AxisOptions {
-  title: string;
-  min: number;
-  max: number;
-  visible: boolean;
-  tickFormat: (d: any) => string;
-  transform: string;
-  type: 'time' | 'number' | 'category';
-  zoom?: boolean;
-  scaleOptions: {
-    type?: ScaleType;
-    base?: number;
-  };
-  inverted?: boolean;
-  negative?: boolean;
-  opposite?: boolean;
-  niceTicks = true;
-  plotLines: PlotLine[];
-  plotBands: PlotBand[];
-
-  constructor(options?: {
-    title?: string;
-    min?: number;
-    max?: number;
-    visible?: boolean;
-    tickFormat?: (d: any) => string;
-    transform?: string;
-    type?: 'time' | 'number' | 'category';
-    zoom?: boolean;
-    scaleOptions?: {
-      type?: ScaleType;
-      base?: number;
-    };
-    inverted?: boolean;
-    negative?: boolean;
-    opposite?: boolean;
-    niceTicks?: boolean;
-    plotLines?: PlotLine[];
-    plotBands?: PlotBand[];
-  }) {
-    this.title = options?.title;
-    this.min = options?.min;
-    this.max = options?.max;
-    this.visible = options?.visible ?? true;
-    this.tickFormat = options?.tickFormat;
-    this.transform = options?.transform;
-    this.zoom = options?.zoom;
-    this.type = options?.type ?? 'number';
-    this.scaleOptions = {
-      type: ScaleType.linear,
-      base: 10,
-      ...options?.scaleOptions,
-    };
-    this.inverted = options?.inverted;
-    this.negative = options?.negative;
-    this.opposite = options?.opposite;
-    this.niceTicks = options?.niceTicks == null ? true : options.niceTicks;
-    this.plotLines = options?.plotLines || [];
-    this.plotBands = options?.plotBands || [];
-  }
-}

package/src/component/chart/model/chart-bounds.ts

@@ -1,18 +0,0 @@
-export class ChartBounds {
-  top = 35;
-  right = 50;
-  bottom = 50;
-  left = 35;
-
-  constructor(options?: {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left: number;
-  }) {
-    this.top = options?.top || this.top;
-    this.right = options?.right || this.right;
-    this.bottom = options?.bottom || this.bottom;
-    this.left = options?.left || this.left;
-  }
-}

package/src/component/chart/model/chart-options.ts

@@ -1,79 +0,0 @@
-import { AxisOptions } from './axis-options';
-import { Series } from './series';
-import { BasePoint } from './point/base-point';
-import { TooltipOptions } from './tooltip-options';
-import { ChartBounds } from './chart-bounds';
-import { LegendType } from './enum/legend-type';
-import { ZoomType } from './enum/zoom-type';
-import { ZoomTransform } from 'd3';
-import { Annotation } from './annotation';
-
-export class ChartOptions {
-  name: string;
-  series?: Series<BasePoint>[];
-  legend?: {
-    type?: LegendType;
-    visible?: boolean;
-  };
-  zoom?: {
-    enable?: boolean;
-    zoomType?: ZoomType;
-    zoomTransform?: ZoomTransform;
-  };
-  tooltip?: TooltipOptions;
-  xAxis: AxisOptions[];
-  yAxis: AxisOptions[];
-  gridLines?: boolean;
-  width?: number;
-  height?: number;
-  bounds = new ChartBounds();
-  annotations?: Annotation[];
-
-  constructor(options?: {
-    name?: string;
-    series?: Series<BasePoint>[];
-    zoom?: {
-      enable?: boolean;
-      zoomType?: ZoomType;
-      zoomTransform?: ZoomTransform;
-    };
-    tooltip?: TooltipOptions;
-    xAxis: AxisOptions[];
-    yAxis: AxisOptions[];
-    gridLines?: boolean;
-    width?: number;
-    height?: number;
-    legend?: {
-      type?: LegendType;
-      visible?: boolean;
-    };
-    bounds?: ChartBounds;
-    annotations?: Annotation[];
-  }) {
-    this.name = options?.name;
-    this.zoom = {
-      enable: false,
-      zoomType: ZoomType.x,
-      ...options?.zoom,
-    };
-    this.series = options?.series?.map((series, idx) => ({
-      ...series,
-      id: idx,
-    }));
-    this.zoom = { enable: false, zoomType: ZoomType.x, ...options?.zoom };
-    this.series = options?.series?.map((series, idx) => new Series(series));
-    this.tooltip = new TooltipOptions({ ...options?.tooltip });
-    this.xAxis = options?.xAxis?.map((_) => new AxisOptions(_));
-    this.yAxis = options?.yAxis?.map((_) => new AxisOptions(_));
-    this.gridLines = options?.gridLines == null ? true : options.gridLines;
-    this.width = options?.width;
-    this.height = options?.height;
-    this.legend = {
-      visible: true,
-      type: LegendType.swatches,
-      ...options?.legend,
-    };
-    this.bounds = { ...this.bounds, ...options?.bounds };
-    this.annotations = options?.annotations;
-  }
-}

package/src/component/chart/model/enum/axis-type.ts

@@ -1,4 +0,0 @@
-export enum AxisType {
-  abscissa,
-  ordinatus,
-}

package/src/component/chart/model/enum/dispatch-type.ts

@@ -1,4 +0,0 @@
-export enum DispatchType {
-  moveLine = 'moveLine',
-  movePoint = 'movePoint',
-}

package/src/component/chart/model/enum/drag-point-type.ts

@@ -1,5 +0,0 @@
-export enum DragPointType {
-  x,
-  y,
-  xy,
-}

package/src/component/chart/model/enum/legend-type.ts

@@ -1,4 +0,0 @@
-export enum LegendType {
-  swatches,
-  gradient,
-}

package/src/component/chart/model/enum/public-api.ts

@@ -1,7 +0,0 @@
-export * from './axis-type';
-export * from './scale';
-export * from './series-type';
-export * from './legend-type';
-export * from './scale-type';
-export * from './zoom-type';
-export * from './drag-point-type';

package/src/component/chart/model/enum/scale-type.ts

@@ -1,7 +0,0 @@
-export enum ScaleType {
-  linear,
-  log,
-  pow,
-  sqrt,
-  time,
-}

package/src/component/chart/model/enum/scale.ts

@@ -1,5 +0,0 @@
-export enum Scale {
-  time = 'time',
-  number = 'number',
-  category = 'category',
-}

package/src/component/chart/model/enum/series-type.ts

@@ -1,10 +0,0 @@
-export enum SeriesType {
-  area,
-  bar,
-  line,
-  pie,
-  scatter,
-  spline,
-  contour,
-  custom,
-}

package/src/component/chart/model/enum/zoom-type.ts

@@ -1,5 +0,0 @@
-export enum ZoomType {
-  x,
-  y,
-  xy,
-}

package/src/component/chart/model/i-drag-event.ts

@@ -1,5 +0,0 @@
-export interface IDragEvent<T> {
-  [key: string]: any;
-  event: DragEvent;
-  target: T;
-}

package/src/component/chart/model/i-drawer-legend.ts

@@ -1,14 +0,0 @@
-import { Series } from './series';
-import { BasePoint } from './point/base-point';
-
-export interface LegendDrawOptions<T extends BasePoint> {
-  context: HTMLElement;
-  series: Series<T>[];
-  columns?: number;
-  width?: number;
-  height?: number;
-}
-
-export interface ILegendDrawer {
-  draw(options: LegendDrawOptions<BasePoint>): void;
-}

package/src/component/chart/model/i-drawer.ts

@@ -1,19 +0,0 @@
-import { BasePoint } from './point/base-point';
-import { Series } from './series';
-import * as d3 from 'd3';
-import { ChartOptions } from './chart-options';
-import { IDragEvent } from './i-drag-event';
-
-export interface IDrawer<T extends BasePoint> {
-  dispatch?: d3.Dispatch<IDragEvent<Series<T>>>;
-
-  draw(
-    series: Series<T>,
-    drawContext:
-      | d3.Selection<SVGElement, unknown, null, undefined>
-      | d3.Selection<HTMLCanvasElement, unknown, null, undefined>,
-    scaleX: any,
-    scaleY: any,
-    options: ChartOptions
-  ): void;
-}

package/src/component/chart/model/i-zoom-event.ts

@@ -1,9 +0,0 @@
-import { ZoomType } from './enum/zoom-type';
-import { D3ZoomEvent, ZoomTransform } from 'd3';
-
-export interface IZoomEvent {
-  domain: [number, number];
-  zoomType: ZoomType;
-  zoomTransform?: ZoomTransform;
-  event?: D3ZoomEvent<any, any>;
-}

package/src/component/chart/model/plot-band.ts

@@ -1,43 +0,0 @@
-export class PlotBand {
-  id: any;
-  from: number;
-  to: number;
-  label?: string;
-  color?: string;
-  image?: string;
-  showGrabbers?: boolean;
-  draggable?: boolean;
-  resizable?: boolean;
-  min?: number;
-  max?: number;
-  opacity?: number;
-
-  constructor(options?: {
-    id: any;
-    from: number;
-    to: number;
-    label?: string;
-    color?: string;
-    image?: string;
-    showGrabbers?: boolean;
-    draggable?: boolean;
-    resizable?: boolean;
-    min?: number;
-    max?: number;
-    opacity?: number;
-  }) {
-    this.id = options?.id;
-    this.from = options?.from;
-    this.to = options?.to;
-    this.label = options?.label;
-    this.color = options?.color || '#59AE501A';
-    this.image = options?.image;
-    this.showGrabbers =
-      options?.showGrabbers != null ? options.showGrabbers : true;
-    this.draggable = options?.draggable != null ? options?.draggable : false;
-    this.resizable = options?.resizable != null ? options?.resizable : true;
-    this.min = options?.min;
-    this.max = options?.max;
-    this.opacity = options?.opacity;
-  }
-}

package/src/component/chart/model/plot-line.ts

@@ -1,30 +0,0 @@
-export class PlotLine {
-  id: number;
-  width?: number;
-  value: number;
-  label?: string;
-  color?: string;
-  dashed?: boolean;
-  min?: number;
-  max?: number;
-
-  constructor(options?: {
-    id: number;
-    width?: number;
-    value: number;
-    label?: string;
-    color?: string;
-    dashed?: boolean;
-    min?: number;
-    max?: number;
-  }) {
-    this.id = options?.id;
-    this.width = options?.width || 1;
-    this.value = options?.value;
-    this.label = options?.label;
-    this.dashed = options?.dashed || false;
-    this.color = options?.color || 'var(--color-text-70)';
-    this.min = options?.min;
-    this.max = options?.max;
-  }
-}

package/src/component/chart/model/point/bar-point.ts

@@ -1,7 +0,0 @@
-import { BasePoint } from './base-point';
-
-export interface BarPoint extends BasePoint {
-  id: number;
-  label: string;
-  visible: boolean;
-}

package/src/component/chart/model/point/base-point.ts

@@ -1,10 +0,0 @@
-import { MarkerOptions } from './marker-options';
-
-export interface BasePoint {
-  x: number;
-  x1?: number;
-  y: number;
-  y1?: number;
-  color?: string | number;
-  marker?: MarkerOptions;
-}

package/src/component/chart/model/point/contour-point.ts

@@ -1,5 +0,0 @@
-import { BasePoint } from './base-point';
-
-export interface ContourPoint extends BasePoint {
-  value: number;
-}

package/src/component/chart/model/point/marker-options.ts

@@ -1,12 +0,0 @@
-import { DragPointType } from '../enum/drag-point-type';
-
-export interface MarkerOptions {
-  draggable?: boolean;
-  dragType: DragPointType;
-  style?: {
-    radius?: number;
-    stroke?: string;
-    strokeWidth?: number;
-    color?: string;
-  };
-}

package/src/component/chart/model/point/public-api.ts

@@ -1,3 +0,0 @@
-export * from './base-point';
-export * from './bar-point';
-export * from './marker-options';

package/src/component/chart/model/point/scatter-point.ts

@@ -1,6 +0,0 @@
-import { BasePoint } from './base-point';
-
-export interface ScatterPoint extends BasePoint {
-  radius: number;
-  value: number;
-}

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

@@ -1,16 +0,0 @@
-export * from './enum/public-api';
-export * from './point/public-api';
-
-export * from './axis-options';
-export * from './point/base-point';
-export * from './chart-options';
-export * from './i-drawer';
-export * from './i-drawer-legend';
-export * from './series';
-export * from './tooltip-options';
-export * from './annotation';
-export * from './chart-bounds';
-export * from './plot-line';
-export * from './plot-band';
-export * from './i-drag-event';
-export * from './i-zoom-event';