Browse Source

grid styles

charts-background
vargburz 3 years ago
parent
commit
46910fa3da
  1. 2
      dist/index.js
  2. 3
      dist/types.d.ts
  3. 12
      src/components/grid.ts
  4. 9
      src/css/style.css
  5. 5
      src/index.ts
  6. 3
      src/types.ts

2
dist/index.js vendored

File diff suppressed because one or more lines are too long

3
dist/types.d.ts vendored

@ -99,6 +99,9 @@ export declare type Options = {
renderLegend?: boolean; renderLegend?: boolean;
}; };
export declare type GridOptions = { export declare type GridOptions = {
color?: string;
opacity?: number;
strokeWidth?: number;
x?: { x?: {
enabled?: boolean; enabled?: boolean;
ticksCount?: number; ticksCount?: number;

12
src/components/grid.ts

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

9
src/css/style.css

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

5
src/index.ts

@ -2,8 +2,6 @@ import VueChartwerkPodMixin from './VueChartwerkPodMixin';
import { PodState } from './state'; import { PodState } from './state';
import { Grid } from './components/grid'; import { Grid } from './components/grid';
import styles from './css/style.css';
import { import {
Margin, Margin,
TimeSerie, TimeSerie,
@ -149,9 +147,6 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
_series: T[] = [], _series: T[] = [],
_options: O _options: O
) { ) {
// TODO: test if it's necessary
styles.use();
let options = cloneDeep(_options); let options = cloneDeep(_options);
defaultsDeep(options, DEFAULT_OPTIONS); defaultsDeep(options, DEFAULT_OPTIONS);
this.options = options; this.options = options;

3
src/types.ts

@ -91,6 +91,9 @@ export type Options = {
renderLegend?: boolean; renderLegend?: boolean;
}; };
export type GridOptions = { export type GridOptions = {
color?: string,
opacity?: number,
strokeWidth?: number,
x?: { x?: {
enabled?: boolean; enabled?: boolean;
ticksCount?: number; ticksCount?: number;

Loading…
Cancel
Save