Browse Source

chart background

charts-background
vargburz 3 years ago
parent
commit
81b66f971b
  1. 1
      dist/index.d.ts
  2. 2
      dist/index.js
  3. 3
      dist/types.d.ts
  4. 15
      src/index.ts
  5. 3
      src/types.ts

1
dist/index.d.ts vendored

@ -62,6 +62,7 @@ declare abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
protected renderYAxis(): void; protected renderYAxis(): void;
protected renderY1Axis(): void; protected renderY1Axis(): void;
protected renderCrosshair(): void; protected renderCrosshair(): void;
updateBackground(): void;
protected addEvents(): void; protected addEvents(): void;
protected initBrush(): void; protected initBrush(): void;
protected filterByKeyEvent(key: KeyEvent): () => boolean; protected filterByKeyEvent(key: KeyEvent): () => boolean;

2
dist/index.js vendored

File diff suppressed because one or more lines are too long

3
dist/types.d.ts vendored

@ -45,6 +45,9 @@ export declare type Options = {
orientation?: CrosshairOrientation; orientation?: CrosshairOrientation;
color?: string; color?: string;
}; };
background?: {
color?: string;
};
timeInterval?: { timeInterval?: {
timeFormat?: TimeFormat; timeFormat?: TimeFormat;
count?: number; count?: number;

15
src/index.ts

@ -98,6 +98,9 @@ const DEFAULT_OPTIONS: Options = {
format: AxisFormat.NUMERIC format: AxisFormat.NUMERIC
} }
}, },
background: {
color: 'none',
},
crosshair: { crosshair: {
orientation: CrosshairOrientation.VERTICAL, orientation: CrosshairOrientation.VERTICAL,
color: 'red' color: 'red'
@ -172,11 +175,11 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
} }
public render(): void { public render(): void {
this.renderAxes();
this.renderGrid();
this.renderClipPath(); this.renderClipPath();
this.addEvents(); this.addEvents();
this.updateBackground();
this.renderAxes();
this.renderGrid();
this.renderCrosshair(); this.renderCrosshair();
this.renderMetricsContainer(); this.renderMetricsContainer();
@ -395,6 +398,12 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
} }
} }
updateBackground(): void {
// TODO: background should be a separate component
const background = this.chartContainer.select('.overlay') || this.chartContainer.select('.custom-overlay');
background.attr('fill', this.options.background.color);
}
protected addEvents(): void { protected addEvents(): void {
// TODO: refactor for a new mouse/scroll events // TODO: refactor for a new mouse/scroll events
const panKeyEvent = this.options.zoomEvents.mouse.pan.keyEvent; const panKeyEvent = this.options.zoomEvents.mouse.pan.keyEvent;

3
src/types.ts

@ -37,6 +37,9 @@ export type Options = {
orientation?: CrosshairOrientation; orientation?: CrosshairOrientation;
color?: string; color?: string;
} }
background?: {
color?: string;
};
timeInterval?: { timeInterval?: {
timeFormat?: TimeFormat; timeFormat?: TimeFormat;
count?: number; count?: number;

Loading…
Cancel
Save