grid styles

dist/index.d.ts

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

dist/types.d.ts

@@ -45,6 +45,9 @@ export declare type Options = {
         orientation?: CrosshairOrientation;
         color?: string;
     };
+    background?: {
+        color?: string;
+    };
     timeInterval?: {
         timeFormat?: TimeFormat;
         count?: number;
@@ -96,6 +99,9 @@ export declare type Options = {
     renderLegend?: boolean;
 };
 export declare type GridOptions = {
+    color?: string;
+    opacity?: number;
+    strokeWidth?: number;
     x?: {
         enabled?: boolean;
         ticksCount?: number;

src/components/grid.ts

@@ -8,6 +8,9 @@ import defaultsDeep from 'lodash/defaultsDeep';
 
 const DEFAULT_GRID_TICK_COUNT = 5;
 const DEFAULT_GRID_OPTIONS: GridOptions = {
+  color: 'lightgray',
+  opacity: 0.7,
+  strokeWidth: 0.5,
   x: {
     enabled: true,
     ticksCount: DEFAULT_GRID_TICK_COUNT,
@@ -85,9 +88,12 @@ export class Grid {
 
   updateStylesOfTicks(): void {
     // TODO: add options for these actions
-    this._svgEl.selectAll('.grid').selectAll('.tick')
+    this._svgEl.selectAll('.grid').selectAll('.tick').select('line')
-      .attr('opacity', '0.5');
+      .attr('stroke', this.gridOptions.color)
+      .attr('stroke-opacity', this.gridOptions.opacity)
+      .style('stroke-width', this.gridOptions.strokeWidth + 'px');
     this._svgEl.selectAll('.grid').select('.domain')
-      .style('pointer-events', 'none');
+      .style('pointer-events', 'none')
+      .style('stroke-width', 0);
   }
 }

src/css/style.css

@@ -1,9 +0,0 @@
-.grid path {
-  stroke-width: 0;
-}
-
-.grid line {
-  stroke: lightgrey;
-  stroke-opacity: 0.7;
-  shape-rendering: crispEdges;
-}

src/index.ts

@@ -2,8 +2,6 @@ import VueChartwerkPodMixin from './VueChartwerkPodMixin';
 import { PodState } from './state';
 import { Grid } from './components/grid';
 
-import styles from './css/style.css';
-
 import {
   Margin,
   TimeSerie,
@@ -98,6 +96,9 @@ const DEFAULT_OPTIONS: Options = {
       format: AxisFormat.NUMERIC
     }
   },
+  background: {
+    color: 'none',
+  },
   crosshair: {
     orientation: CrosshairOrientation.VERTICAL,
     color: 'red'
@@ -146,9 +147,6 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     _series: T[] = [],
     _options: O
   ) {
-    // TODO: test if it's necessary
-    styles.use();
-
     let options = cloneDeep(_options);
     defaultsDeep(options, DEFAULT_OPTIONS);
     this.options = options;
@@ -172,11 +170,11 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   }
 
   public render(): void {
-    this.renderAxes();
-    this.renderGrid();
-
     this.renderClipPath();
     this.addEvents();
+    this.updateBackground();
+    this.renderAxes();
+    this.renderGrid();
 
     this.renderCrosshair();
     this.renderMetricsContainer();
@@ -395,6 +393,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 {
     // TODO: refactor for a new mouse/scroll events
     const panKeyEvent = this.options.zoomEvents.mouse.pan.keyEvent;

src/types.ts

@@ -37,6 +37,9 @@ export type Options = {
     orientation?: CrosshairOrientation;
     color?: string;
   }
+  background?: {
+    color?: string;
+  };
   timeInterval?: {
     timeFormat?: TimeFormat;
     count?: number;
@@ -88,6 +91,9 @@ export type Options = {
   renderLegend?: boolean;
 };
 export type GridOptions = {
+  color?: string,
+  opacity?: number,
+  strokeWidth?: number,
   x?: {
     enabled?: boolean;
     ticksCount?: number;