chartwerk
/
gauge-pod
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

reversed option

merge-requests/1/merge
vargburz 4 years ago
parent
27c2da02ab
commit
fe80bfbf06
3 changed files with 56 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      examples/02-reversed.html
  2. 24
      src/index.ts
  3. 1
      src/types.ts

36
examples/02-reversed.html
Unescape View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 400px; height: 400px;"></div>
<script type="text/javascript">
var pod = new ChartwerkGaugePod(
document.getElementById('chart'),
[{ target: 'test', datapoints: [[5, 5], [0, 10], [30, 15], [50, 20], [8, 25]] }],
{
stops: [
{
color: 'green',
value: 15
},
{
color: 'orange',
value: 10
}
],
defaultColor: 'red',
maxValue: 20,
minValue: -5,
reversed: true
}
);
pod.render();
</script>
</body>
</html>

24
src/index.ts
Unescape View File

@ -9,11 +9,11 @@ import * as d3 from 'd3';
import * as _ from 'lodash'; import * as _ from 'lodash';
const SPACE_BETWEEN_CIRCLES = 2; const SPACE_BETWEEN_CIRCLES = 2;
const CIRCLES_ROUNDING = 0.15; //radians const CIRCLES_ROUNDING = 0.25; //radians
const BACKGROUND_COLOR = 'rgba(38, 38, 38, 0.1)'; const BACKGROUND_COLOR = 'rgba(38, 38, 38, 0.1)';
const DEFAULT_INNER_RADIUS = 48; const DEFAULT_INNER_RADIUS = 52;
const DEFAULT_OUTER_RADIUS = 72; const DEFAULT_OUTER_RADIUS = 72;
const STOPS_CIRCLE_WIDTH = 4; const STOPS_CIRCLE_WIDTH = 8;
const VALUE_TEXT_FONT_SIZE = 16; const VALUE_TEXT_FONT_SIZE = 16;
const DEFAULT_VALUE_TEXT_Decimals = 2; const DEFAULT_VALUE_TEXT_Decimals = 2;
const VALUE_TEXT_MARGIN = 10; const VALUE_TEXT_MARGIN = 10;
@ -48,7 +48,8 @@ const DEFAULT_GAUGE_OPTIONS: GaugeOptions = {
outerRadius: DEFAULT_OUTER_RADIUS, outerRadius: DEFAULT_OUTER_RADIUS,
icons: [], icons: [],
valueFontSize: VALUE_TEXT_FONT_SIZE, valueFontSize: VALUE_TEXT_FONT_SIZE,
valueArcBackgroundColor: BACKGROUND_COLOR valueArcBackgroundColor: BACKGROUND_COLOR,
reversed: false,
}; };
export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions> { export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions> {
@ -221,6 +222,9 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
} }
private get _valueArcColors(): [string, string] { private get _valueArcColors(): [string, string] {
if(this.options.reversed === true) {
return [this._valueArcBackgroundColor, this._mainCircleColor];
}
return [this._mainCircleColor, this._valueArcBackgroundColor]; return [this._mainCircleColor, this._valueArcBackgroundColor];
} }
@ -257,6 +261,9 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
getUpdatedRangeWithMinValue(range: number[]): number[] { getUpdatedRangeWithMinValue(range: number[]): number[] {
let updatedRange = range; let updatedRange = range;
updatedRange[0] = range[0] - this._minValue; updatedRange[0] = range[0] - this._minValue;
if(this.options.reversed === true) {
return _.reverse(updatedRange);
}
return updatedRange; return updatedRange;
} }
@ -264,6 +271,9 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
const valueRange = this._maxValue - this._minValue; const valueRange = this._maxValue - this._minValue;
const startValue = this.aggregatedValue - this._minValue; const startValue = this.aggregatedValue - this._minValue;
const endValue = valueRange - startValue; const endValue = valueRange - startValue;
if(this.options.reversed === true) {
return [endValue, startValue];
}
return [startValue, endValue]; return [startValue, endValue];
} }
@ -277,7 +287,11 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
private get _colors(): string[] { private get _colors(): string[] {
// TODO: refactor // TODO: refactor
return [...this._sortedStops.map(stop => stop.color), this.options.defaultColor]; const colors = [...this._sortedStops.map(stop => stop.color), this.options.defaultColor];
if(this.options.reversed === true) {
return _.reverse(colors);
}
return colors;
} }
private get _valueText(): string { private get _valueText(): string {

1
src/types.ts
Unescape View File

@ -40,5 +40,6 @@ export type GaugeOptionsParams = {
icons: IconConfig[]; icons: IconConfig[];
valueFontSize: number; valueFontSize: number;
valueArcBackgroundColor: string; valueArcBackgroundColor: string;
reversed: boolean;
} }
export type GaugeOptions = Options & Partial<GaugeOptionsParams>; export type GaugeOptions = Options & Partial<GaugeOptionsParams>;

Write Preview
Loading…
Cancel
Save