From f8374b9ff576275684ff8f5798a3f28a569a904e Mon Sep 17 00:00:00 2001 From: rozetko Date: Tue, 24 May 2022 23:11:58 +0400 Subject: [PATCH] update core --- package.json | 3 +- src/index.ts | 121 +++++-------------------- src/models/gauge_options.ts | 170 ++++++++++++++++++++++++++++++++++++ src/models/gauge_series.ts | 17 ++++ src/types.ts | 19 ++-- yarn.lock | 6 +- 6 files changed, 226 insertions(+), 110 deletions(-) create mode 100644 src/models/gauge_options.ts create mode 100644 src/models/gauge_series.ts diff --git a/package.json b/package.json index a7d7708..2ecf041 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "scripts": { "build": "webpack --config build/prod.webpack.conf.js && webpack --config build/dev.webpack.conf.js", "dev": "webpack --watch --config build/dev.webpack.conf.js", - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "update-core": "yarn up @chartwerk/core && yarn up @chartwerk/core@latest" }, "author": "CorpGlory", "license": "Apache-2.0", diff --git a/src/index.ts b/src/index.ts index 2cdd5aa..7241463 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,105 +1,40 @@ -import { GaugeTimeSerie, GaugeOptions, Stat, Stop, IconConfig, IconPosition, PointCoordinate } from './types'; - -import { ChartwerkPod, VueChartwerkPodMixin, AxisFormat, CrosshairOrientation } from '@chartwerk/core'; +import { GaugeData, GaugeConfig, Stat, Stop, IconConfig, IconPosition, PointCoordinate } from './types'; +import { GaugeSeries } from './models/gauge_series'; +import { CORE_OPTIONS_DEFAULTS, GaugeOptions } from './models/gauge_options'; import { findClosest } from './utils'; +import { ChartwerkPod, VueChartwerkPodMixin } from '@chartwerk/core'; + import * as d3 from 'd3'; import * as _ from 'lodash'; + const SPACE_BETWEEN_CIRCLES = 2; const CIRCLES_ROUNDING = 0.25; //radians -const BACKGROUND_COLOR = 'rgba(38, 38, 38, 0.1)'; -const DEFAULT_INNER_RADIUS = 52; -const DEFAULT_OUTER_RADIUS = 72; const STOPS_CIRCLE_WIDTH = 8; const DEFAULT_VALUE_TEXT_FONT_SIZE = 16; const VALUE_TEXT_MARGIN = 10; const DEFAULT_ICON_SIZE = 20; //px -const DEFAULT_GAUGE_OPTIONS: GaugeOptions = { - renderLegend: false, - grid: { - x: { - enabled: false - }, - y: { - enabled: false - } - }, - zoomEvents: { - mouse: { - zoom: { - isActive: false, - }, - pan: { - isActive: false - }, - }, - scroll: { - zoom: { - isActive: false - }, - pan: { - isActive: false, - } - }, - }, - axis: { - x: { isActive: false, format: AxisFormat.NUMERIC }, - y: { isActive: false, format: AxisFormat.NUMERIC }, - y1: { isActive: false, format: AxisFormat.NUMERIC }, - }, - margin: { - top: 0, bottom: 0, - left: 0, right: 0 - }, - stops: [ - { - color: 'green', - value: 10 - }, - { - color: 'yellow', - value: 20 - } - ], - crosshair: { - orientation: CrosshairOrientation.VERTICAL, - color: 'red' - }, - defaultColor: 'red', - stat: Stat.CURRENT, - innerRadius: DEFAULT_INNER_RADIUS, - outerRadius: DEFAULT_OUTER_RADIUS, - icons: [], - valueFontSize: null, - valueArcBackgroundColor: BACKGROUND_COLOR, - reversed: false, - enableExtremumLabels: false, - enableThresholdLabels: false, - enableThresholdDrag: false, -}; +export class ChartwerkGaugePod extends ChartwerkPod { + series: GaugeSeries; + options: GaugeOptions; -export class ChartwerkGaugePod extends ChartwerkPod { _draggableLines: any[] = []; _draggedThresholdValues: number[] = []; // threshold values after dragging _thresholdArc: any | null = null; _thresholdTextLabels: any[] = []; - constructor(el: HTMLElement, _series: GaugeTimeSerie[] = [], _options: GaugeOptions = {}) { - super( - el, _series, - _.defaults(_options, DEFAULT_GAUGE_OPTIONS) - ); + constructor(el: HTMLElement, _series: GaugeData[] = [], _options: GaugeConfig = {}) { + // TODO: update core options to disable grid + super(el, _series, _.assign(_options, CORE_OPTIONS_DEFAULTS)); + this.series = new GaugeSeries(_series); + this.options = new GaugeOptions(_options); } renderMetrics(): void { - if(this.series.length === 0 || this.series[0].datapoints.length === 0) { - this.renderNoDataPointsMessage(); - return; - } this._renderOverlayBackground(); this._renderValueArc(); this._renderThresholdArc(); @@ -109,13 +44,11 @@ export class ChartwerkGaugePod extends ChartwerkPod { @@ -284,7 +217,7 @@ export class ChartwerkGaugePod extends ChartwerkPod { return d3.scaleLinear() - .domain([this.options.minValue, this.options.maxValue]) + .domain([this.options.minValue , this.options.maxValue]) .range([(-1 * Math.PI) / 2 - CIRCLES_ROUNDING, Math.PI / 2 + CIRCLES_ROUNDING]); } @@ -334,9 +267,7 @@ export class ChartwerkGaugePod extends ChartwerkPod { + + constructor(options: GaugeConfig) { + super(options); + } + + protected get defaults(): GaugeConfig { + console.log({ ...this._coreDefaults, ...GAUGE_OPTIONS_DEFAULTS }) + return { ...this._coreDefaults, ...GAUGE_OPTIONS_DEFAULTS }; + } + + get icons(): IconConfig[] { + return this._options.icons; + } + + get minValue(): number | undefined { + return this._options.minValue; + } + + get maxValue(): number | undefined { + return this._options.maxValue; + } + + get enableThresholdDrag(): boolean { + return this._options.enableThresholdDrag; + } + + get enableThresholdLabels(): boolean { + return this._options.enableThresholdLabels; + } + + get enableExtremumLabels(): boolean { + return this._options.enableExtremumLabels; + } + + get reversed(): boolean { + return this._options.reversed; + } + + get defaultColor(): string { + return this._options.defaultColor; + } + + get stops(): Stop[] { + return this._options.stops; + } + + get valueFontSize(): number | undefined { + return this._options.valueFontSize; + } + + get stat(): Stat { + return this._options.stat; + } + + get valueArcBackgroundColor(): string { + return this._options.valueArcBackgroundColor; + } + + get innerRadius(): number { + return this._options.innerRadius; + } + + get outerRadius(): number { + return this._options.outerRadius; + } + + valueFormatter(value: number): string { + if(this._options.valueFormatter) { + return this._options.valueFormatter(value); + } + if(lodashIsNil(value)) { + return 'not defined'; + } + return value.toString(); + } + + callbackDrag(event: any): void { + if(this._options.dragCallback) { + this._options.dragCallback(event); + } + } + + callbackDragEnd(event: any): void { + if(this._options.dragEndCallback) { + this._options.dragEndCallback(event); + } + } +} diff --git a/src/models/gauge_series.ts b/src/models/gauge_series.ts new file mode 100644 index 0000000..7ce61ba --- /dev/null +++ b/src/models/gauge_series.ts @@ -0,0 +1,17 @@ +import { GaugeData } from '../types'; + +import { CoreSeries } from '@chartwerk/core'; + + +const GAUGE_DATA_DEFAULTS = { }; + +export class GaugeSeries extends CoreSeries { + + constructor(series: GaugeData[]) { + super(series); + } + + protected get defaults(): GaugeData { + return { ...this._coreDefaults, ...GAUGE_DATA_DEFAULTS }; + } +} diff --git a/src/types.ts b/src/types.ts index d0fc1bd..11acb7b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,5 @@ -import { TimeSerie, Options } from '@chartwerk/core'; +import { Serie, Options } from '@chartwerk/core'; + export enum Stat { CURRENT = 'current', @@ -16,9 +17,7 @@ export type PointCoordinate = { x: number, y: number } -export type ValueFormatter = (value: number) => string; - -export type GaugeTimeSerie = TimeSerie; +export type ValueFormatter = (value?: number | null) => string; export type IconConfig = { src: string, @@ -34,7 +33,6 @@ export enum IconPosition { export type GaugeOptionsParams = { innerRadius: number; outerRadius: number; - // TODO: minValue maxValue: number; minValue: number; stops: { color: string , value: number }[]; @@ -48,7 +46,12 @@ export type GaugeOptionsParams = { enableThresholdLabels: boolean; // render threshold values as a text under the gauge enableExtremumLabels: boolean; // render min/max values as a text above the gauge enableThresholdDrag: boolean; // drag threshold arcs to change stops values - dragCallback: (event: any) => void; - dragEndCallback: (event: any) => void; + dragCallback: DragCallback; + dragEndCallback: DragEndCallback; } -export type GaugeOptions = Options & Partial; + +export type GaugeData = Serie; +export type GaugeConfig = Options & Partial; + +export type DragCallback = (event: any) => void; +export type DragEndCallback = (event: any) => void; diff --git a/yarn.lock b/yarn.lock index 19676ff..88bfda2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6,12 +6,12 @@ __metadata: cacheKey: 8 "@chartwerk/core@npm:latest": - version: 0.5.4 - resolution: "@chartwerk/core@npm:0.5.4" + version: 0.6.3 + resolution: "@chartwerk/core@npm:0.6.3" dependencies: d3: ^5.7.2 lodash: ^4.14.149 - checksum: 0d686409377d6880f0012db3d9c1e1910cf3660885ac13196dabe93f57eca53984cf52dcf781b2876373fe9efc7b9d0209117cbcd811c50892b1de4f38a4a37f + checksum: bb804b1a2339fc19857e5caa07d16ed78fb1b0739878d3f7488e9f8661667ed78ada3a63afd15206bd4210746b50916b253e98f077451cc8d899728ecf08ba50 languageName: node linkType: hard